@gradient-js/css
v1.2.3
Published
Gradient-js css generation module
Downloads
63
Maintainers
Readme
@gradient-js/css
gradient-js
module for css gradient generation
Installation
CLI
Yarn
yarn add @gradient-js/css
Npm
npm install --save @gradient-js/css
CDN
<script src="https://unpkg.com/gradient-js/[email protected]/css.js">
Usage
import { Css } from '@gradient-js/css';
const css = new Css();
const gradient = css.get(colors, config);
Inputs
In order to create a gradient you will need to pass an array of colors
and an options
object to the Css' get
method. colors
should be an array of strings in any valid css format (rgb(a), hex or hsl(a)). options
object consists of the CoreOptions and following properties:
type CssOptions = CoreOptions & {
type: 'linear' | 'radial';
angle?: number;
left?: number;
top?: number;
shape?: 'ellipse' | 'circle';
extentKeyword?: 'none' | 'closest-side' | 'closest-corner' | 'farthest-side' | 'farthest-corner';
};
Where each property can be described as it follows:
| Option | Type | Description |
| - | - | - |
| type
| 'linear'
or 'radial'
| CSS gradient type - linear or radial |
| angle
| number
| Applied to linear gradients only |
| left
| number
| Applied to radial gradients only |
| top
| number
| Applied to radial gradients only |
| shape
| 'ellipse'
or 'circle'
| Applied to radial gradients only |
| extentKeyword
| 'none'
or 'closest-side'
or 'closest-corner'
or 'farthest-side'
or 'farthest-corner'
| Applied to radial gradients only |