Gerillass 3.0.0 is out. One gradient mixin replaces two, and text-gradient takes its colours first, so read the migration guide before you upgrade.
Gerillass
v3.0.0The gradientValue function returns the same gradient the gradient mixin writes, as a value instead of a declaration. Use it where a gradient is one part of a property: layered over a photo in a single background-image, or as a mask-image or border-image.
It takes the same arguments as the mixin and refuses the same input.
A function returns one value, so it cannot write the fallback the mixin writes before a gradient with $in. If an old browser matters, write the same call without $in in a declaration before it.
Arguments
| Name | Type | Description |
|---|---|---|
$colors | list | The colour stops, in the forms the gradient mixin takes. |
$type | string | linear, the default, radial or conic. |
$direction | string, number | Linear only. |
$shape | string | Radial only. |
$position | string | Radial or conic. |
$from | number | Conic only. |
$in | string | A colour space such as oklab. |
$repeating | boolean | true for a repeating gradient. |
Examples
A dark gradient layered over a photo, so the white title on it stays readable.
.element{
display: flex;
align-items: flex-end;
padding: 20px;
font: 700 24px/1.2 system-ui, sans-serif;
color: #fff;
background-image: gradientValue((rgba(0, 0, 0, 0.75), transparent), $direction: top), url("/images/landscape.webp");
background-size: cover;
background-position: center;
}.element {
display: flex;
align-items: flex-end;
padding: 20px;
font: 700 24px/1.2 system-ui, sans-serif;
color: #fff;
background-image: linear-gradient(to top, rgba(0, 0, 0, 0.75), transparent), url("/images/landscape.webp");
background-size: cover;
background-position: center;
}A gradient as a mask, fading the element itself out towards the bottom.
.element{
background: #43c6ac;
mask-image: gradientValue((#000 40%, transparent));
}.element {
background: #43c6ac;
mask-image: linear-gradient(#000 40%, transparent);
}A gradient border. border-image draws the gradient where the border would be, so the box keeps its own background.
.element{
border: 6px solid;
border-image: gradientValue((#43c6ac, #191654), $direction: right) 1;
}.element {
border: 6px solid;
border-image: linear-gradient(to right, #43c6ac, #191654) 1;
}Two gradients in one property. A soft radial glow sits on top of a linear wash, the layered background many landing pages use.
.element{
background-image:
gradientValue((rgba(255, 255, 255, 0.6), transparent 60%), radial, $shape: circle, $position: top-left),
gradientValue((#6366f1, #ec4899), $direction: 135deg);
}.element {
background-image: radial-gradient(circle at top left, rgba(255, 255, 255, 0.6), transparent 60%), linear-gradient(135deg, #6366f1, #ec4899);
}What it refuses
The function refuses what the gradient mixin refuses, and names itself in the message. An argument that does not belong to the gradient's type stops the build, because the browser would ignore it and nothing would say so.
.element {
background-image: gradientValue(red blue, $shape: circle);
}Error: $shape is for a radial gradient, and this one is linear.A direction the browser drops stops it too, since the whole gradient goes with it.
.element {
mask-image: gradientValue(#000 transparent, $direction: "to center");
}Error: `"to center"` is not a valid $direction for `gradientValue`. Pass an angle such as `45deg` or `0.25turn`, `"to top right"`, or one of: top, top-right, right, bottom-right, bottom, bottom-left, left, top-left.