CSS & Styling
Hoe maak je kleurgradiënten met CSS?
Gradients maken smooth kleurovergangen.
Gradient types
linear-gradient: rechte lijn radial-gradient: cirkel van buiten naar binnen conic-gradient: vanuit middelpunt in cirkel
Syntax
linear-gradient(direction, color1, color2, ...) Direction: to right, 45deg, etc
Code Voorbeelden
CSSVerschillende gradiënten
/* Linear gradient left-to-right */
.linear {
background: linear-gradient(to right, blue, red);
}
/* 45 degree angle */
.diagonal {
background: linear-gradient(45deg, #3a71ff, #5f6fff);
}
/* Multiple stops */
.multi {
background: linear-gradient(
to right,
red 0%,
yellow 50%,
blue 100%
);
}
/* Radial gradient */
.radial {
background: radial-gradient(circle, white, black);
}
/* Conic gradient */
.conic {
background: conic-gradient(red, yellow, lime, water, blue, red);
}Relevante trefwoorden
gradientlinear-gradientcolor