Smooth Gradient Sass Function

You can get smooth gradient sass function

Gradients are scrim, easeOutSine, and clothoid curve. Key is color-stop, value is opacity.

Scrim gradient color-stop map
$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
);
Ease-out-sine gradient color-stop map
$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 gradient color-stop map
$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

On Image

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));