Gradients (CSS)
How to create and use linear gradients in CSS.
Background or Image
/*
linear-gradient(
{direction}, `to left top`, `45deg`, `0.25turn`
{starting color}
{full color starting position} `0`, `33%`
{full color ending position}, `33%`, `50%`
...more colors
)
*/
.gradient {
background-image: linear-gradient(to right, $color-primary-light, $color-primary-dark);
}
You can make an immediate switch between colors by setting starting and ending positions at the same value. This example goes to the bottom right from 0%-50% with white and then from 50% to 100% with orange.
.selector {
background-image: linear-gradient(to right bottom, white 50%, orange 50%);
}
Text
h1.gradient-text {
/* Create the bg gradient */
background-image: linear-gradient(to right, $color-primary-light, $color-primary-dark);
/* Confine gradient area to width of content */
display: inline-block;
/* Clip the bg gradient to the text area */
-webkit-background-clip: text;
background-clip: text;
/* Allow gradient to show through text area */
color: transparent;
}
References
Last modified: 202401040446