You can get smooth gradient color-stops map for sass linear-gradient
Gradients are scrim, easeOutSine, and clothoid curve.
$scrim: (
1 : 0%,
0.738: 19%,
0.541: 34%,
0.382: 47%,
0.278: 56.5%,
0.194: 65%,
0.126: 73%,
0.075: 80.2%,
0.042: 86.1%,
0.021: 91%,
0.008: 95.2%,
0.002: 98.2%,
0 : 100%
);
$easeOutSine: (
1 : 0%,
0.917: 5.3%,
0.834: 10.6%,
0.753: 15.9%,
0.672: 21.3%,
0.591: 26.8%,
0.511: 32.5%,
0.433: 38.4%,
0.357: 44.5%,
0.283: 50.9%,
0.213: 57.7%,
0.147: 65%,
0.089: 72.9%,
0.042: 81.4%,
0.011: 90.6%,
0 : 100%
);
$clothoid: (
1 : 0%,
0.3 : 50%,
0.15 : 65%,
0.075: 75.5%,
0.037: 82.85%,
0.019: 88%,
0 : 100%
);
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) @import in your .scss file.
@import 'your/project/scss/path/smooth-gradient';
from npm
1) npm install.
npm i smooth-gradient-sass-function
2) @import in your .scss file.
@import '../(to project root)/node_modules/smooth-gradient-sass-function/src/smooth-gradient';
write function
3) write scrim-gradient() sass function and argument in argument of native linear-gradient() function.
/* scrim gradinet */
background-image: linear-gradient(to bottom, scrim-gradient());
/* ease-out-sine gradient */
background-image: linear-gradient(to bottom, easeOutSine-gradient());
/* clothoid gradient */
background-image: linear-gradient(to bottom, clothoid-gradient());
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, scrim-gradient());
background-image: linear-gradient(45deg, scrim-gradient());
/* #ff0000 color start (default is #000000) */
background-image: linear-gradient(to bottom, scrim-gradient(#ff0000));
/* 0.5 opacity start (default is 1) */
background-image: linear-gradient(to bottom, scrim-gradient(#000000, 0.5));
- to right
- 45deg
- start #ff0000
- start opacity: 0.5