CSS lineair-gradiënt() Functie
Voorbeeld
Deze lineaire gradiënt begint bovenaan. Het begint rood, gaat over naar geel en vervolgens naar blauw:
#grad {
background-image: linear-gradient(red, yellow, blue);
}
Meer "Probeer het zelf" voorbeelden hieronder.
Definitie en gebruik
De functie linear-gradient() stelt een lineair verloop in als achtergrondafbeelding.
Om een lineair verloop te creëren, moet u minimaal twee kleurstops definiëren. Kleurstops zijn de kleuren waartussen u vloeiende overgangen wilt weergeven. U kunt naast het verloopeffect ook een startpunt en een richting (of een hoek) instellen.
Voorbeeld van lineair verloop:
Versie: | CSS3 |
---|
Browserondersteuning
De cijfers in de tabel geven de eerste browserversie aan die de functie volledig ondersteunt.
Getallen gevolgd door -webkit-, -moz- of -o- specificeren de eerste versie die met een prefix werkte.
Function | |||||
---|---|---|---|---|---|
linear-gradient() | 26.0 10.0 -webkit- |
10.0 | 16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.1 -o- |
CSS-syntaxis
background-image: linear-gradient(direction, color-stop1,
color-stop2, ...);
Value | Description |
---|---|
direction | Defines a starting point and a direction (or an angle) along with the gradient effect. |
color-stop1, color-stop2,... | Color stops are the colors you want to render smooth transitions among. This value consists of a color value, followed by an optional stop position (a percentage between 0% and 100% or a length along the gradient axis). |
Meer voorbeelden
Voorbeeld
Een lineair verloop dat van links begint. Het begint rood en gaat over in blauw:
#grad {
background-image: linear-gradient(to right, red , blue);
}
Voorbeeld
Een lineair verloop dat linksboven begint (en naar rechtsonder gaat):
#grad {
background-image: linear-gradient(to bottom right, red , blue);
}
Voorbeeld
Een lineair verloop met een bepaalde hoek:
#grad {
background-image: linear-gradient(180deg, red, blue);
}
Voorbeeld
Een lineair verloop met meerdere kleurstops:
#grad {
background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}
Voorbeeld
Een lineair verloop met transparantie:
#grad {
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}
Gerelateerde pagina's
CSS-zelfstudie: CSS-verlopen