Getting Started
Create Your First Project
transparent-gradient requires Node.js. Please install it in your project using npm.
$ npm i transparent-gradient
Usage in JS
Starting from version 1.3.1, transparent-gradient has been renamed to tGradient.
Please use tGradient as the new function name, as the previous one was too long.
import { TGradient } from "transparent-gradient"
new TGradient (target, direction)
Please import the function using the import statement.
TGradient takes two parameters: target, which is the HTML element to apply the gradient to, and direction, which specifies the gradient direction.
Usage
Adjusting the Direction
| How To Use Name | Direction | Description |
|---|
| new TGradient(target) | default | new TGradient(target) creates a gradient from left to right by default. |
| new TGradient(target, 'right') | right | new TGradient(target, 'right') creates a gradient from right to left. |
| new TGradient(target, 'left') | left | new TGradient(target, 'left') creates a gradient from left to right. |
| new TGradient(target, 'top') | top | new TGradient(target, 'top') creates a gradient from top to bottom. |
| new TGradient(target, 'bottom') | bottom | new TGradient(target, 'bottom') creates a gradient from bottom to top. |
Reasons to Use transparent-gradient
Here are the issues we faced 😅
While working on an app project for L Department Store, the designer provided a design concept that involved gradually applying transparency to a blur effect using gradients.
We searched everywhere, including Google and Stack Overflow, but all the examples we found demonstrated white gradients on white backgrounds or fake transparent gradients created by averaging the background image's color values.
However, the design provided by our designer had an image as the background and required applying transparency to the text.
Although I was able to find a solution for this, it proved to be quite challenging for other app developers, web publishers, and front-end developers.
To assist them, I decided to publish transparent-gradient on npm.
Contact the Owner
Email and Owner's Address
transparent-gradient is an npm package developed by Mr. Chu.
It requires the help of many individuals.
GitHub Repository: github.com/chuhongkyu/transparent-gradient
Email: chuhongkyu@gmail.com
Website: https://mrchu.netlify.app/
