You can get smooth gradient sass function
Gradients are scrim, easeOutSine, and clothoid curve. Key is color-stop, value is opacity.
$scrim: (
1 : 0,
0.738: 0.19,
0.541: 0.34,
0.382: 0.47,
0.278: 0.565,
0.194: 0.65,
0.126: 0.73,
0.075: 0.802,
0.042: 0.861,
0.021: 0.91,
0.008: 0.952,
0.002: 0.982,
0 : 1
);
$easeOutSine: (
1 : 0,
0.917: 0.053,
0.834: 0.106,
0.753: 0.159,
0.672: 0.213,
0.591: 0.268,
0.511: 0.325,
0.433: 0.384,
0.357: 0.445,
0.283: 0.509,
0.213: 0.577,
0.147: 0.65,
0.089: 0.729,
0.042: 0.814,
0.011: 0.906,
0 : 1
);
$clothoid: (
1 : 0,
0.3 : 0.50,
0.15 : 0.65,
0.075: 0.755,
0.037: 0.8285,
0.019: 0.88,
0 : 1
);
Usage
from git
1) git clone and move to your project.
git clone git@github.com:oti/smooth-gradient-sass-function.git
mv smooth-gradient-sass-function/src/_smooth-gradient.scss your/project/scss/path
2) @use in your .scss file.
@use 'your/project/scss/path/smooth-gradient' as gradients;
from npm
1) npm install.
npm i smooth-gradient-sass-function
2) @use in your .scss file.
@use '../(to project root)/node_modules/smooth-gradient-sass-function/gradients';
write function
3) write gradients.scrim() sass function and argument in argument of native linear-gradient() function.
/* scrim gradient */
background-image: linear-gradient(to bottom, gradients.scrim());
/* ease-out-sine gradient */
background-image: linear-gradient(to bottom, gradients.easeOutSine());
/* clothoid gradient */
background-image: linear-gradient(to bottom, gradients.clothoid());
Visual Sample
- linear
- scrim
- ease-out-sine
- clothoid
On Image
- linear
- scrim
- ease-out-sine
- clothoid
Any angel, Any color, Any opacity
Function params are Start color & Start Opacity.
/* custom angle */
background-image: linear-gradient(to right, gradients.scrim());
background-image: linear-gradient(45deg, gradients.scrim());
/* #ff0000 color start (default is #000000) */
background-image: linear-gradient(to bottom, gradients.scrim(#ff0000));
/* 0.5 opacity start (default is 1) */
background-image: linear-gradient(to bottom, gradients.scrim(#000000, 0.5));
- to right
- 45deg
- start #ff0000
- start opacity: 0.5