Gerillass
v2.1.0* You can call mixins with or without the gls- namespace (e.g. @include gls-radial-gradient();).
The Radial Gradient Sass mixin helps you generate beautiful radial CSS gradients. It uses the radial-gradient CSS function.
The one-line method makes it very easy to use. To generate a radial gradient, you must pass values for the $shape and $position of the gradient, and for $colors (you need at least two color values). You can also add color stop points (the starting and ending positions of the colors).
Arguments
| Name | Type | Description |
|---|---|---|
$shape | string | Sets the shape of the gradient. Accepts the values circle and ellipse. The default value is ellipse. To skip this argument, use null. |
$position | string, number | Sets the position of the gradient's shape. Accepts the following values: top, top-right, right, bottom-right, bottom, bottom-left, left, top-left, center, closest-side, farthest-side, closest-corner, farthest-corner. |
$colors | list | Accepts a list of colors, with or without color stop points. You can pass as many color values as you want. |
Important: When you use color stop points together with the color values, each group of values must be wrapped in parentheses and separated by a space. See the <a href='#examples'>examples</a> for more.
Examples
Let's call the mixin and pass some values by using the one-line method.
.element{
@include radial-gradient(circle, center, red orange);
}.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);
}.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);
}.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%));
}.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.
.element{
@include radial-gradient(
$shape: circle,
$position: top,
$colors: pink crimson
);
}.element {
background: radial-gradient(circle at top, pink, crimson);
}