Radial Gradient
gls- namespace (e.g. @include gls-radial-gradient();).Radial Gradient Sass mixin helps you generate beautiful radial CSS gradients. It uses the radial-gradient CSS property.
The one-line method makes it very easy to use. To generate a radial gradient you must pass values for gradient’s angle of $direction, $shape of the gradient and $colors (at least two color values must have). You can also add color-stop points (starting and ending positions of colors).
A color-stop points can be defined bylengthor apercentageunits.
Arguments
| Name | Type | Description |
|---|---|---|
$shape | string | This option sets the shape of the gradient. Accepts |
$position | string, number | Sets the position of the gradient’s shape. Accepts the following values: |
$colors | list | Accepts a list of colors with or without the color-stop points. You can pass as many color values as you want. |
* Important: When you use the color-stop points together with the color values, each group of values must be wrapped with parentheses and separated by space. For more see the examples.
Examples
Let’s call the mixin and pass some values by using the one-line method.
.element{
@include radial-gradient(circle, center, red orange);
}//CSS Output
.element {
background: radial-gradient(circle at center, red, orange);
}Let’s change the shape of the gradient.
.element{
@include radial-gradient(ellipse, center, red orange);
}//CSS Output
.element {
background: radial-gradient(ellipse at center, red, orange);
}Now change the position of the gradient’s shape.
.element{
@include radial-gradient(circle, top-right, red orange gold);
}//CSS Output
.element {
background: radial-gradient(circle at top right, red, orange, gold);
}Use color-stops to make sharp transitions between the colors.
.element{
@include radial-gradient(circle, center, (darkslateblue 0 10%) (white 10% 20%) (dodgerblue 20% 30%) (powderblue 30% 100%));
}//CSS Output
.element {
background: radial-gradient(circle at center, darkslateblue 0 10%, white 10% 20%, dodgerblue 20% 30%, powderblue 30% 100%);
}Now let’s try it with the named arguments.
To use named arguments may be time-consuming compared to using ordinal arguments but it is definitely easier to use, especially if the number of arguments that you pass is too many..element{
@include radial-gradient(
$shape: circle,
$position: top,
$colors: pink crimson
);
}//CSS Output
.element {
background: radial-gradient(circle at top, pink, crimson);
}