CSS Gradients

Kleurverloop achtergrond

CSS verlopen laten je zien een vloeiende overgang tussen twee of meer opgegeven kleuren.

CSS definieert twee soorten verlopen:

  • Lineair verloop((naar beneden/naar boven/naar links/naar rechts/diagonaal))
  • Cirkelvormig verloop((gedefinieerd door het midden))

CSS lineair verloop

Om een lineair verloop te maken, moet je ten minste twee kleurpunten definiëren. Kleurpunten zijn de kleuren die je een vloeiende overgang wilt laten zien. Je kunt ook de startpunt en richting (of hoek) en het verloop effect instellen.

syntaxis

background-image: linear-gradient(richting, color-stop1, color-stop2, ...);

Lineair verloop - van boven naar beneden (standaard)

Hieronder wordt een voorbeeld gegeven van een lineaire verloop die van bovenaf begint. Het begint met rood en overgaat naar geel:

Van boven naar beneden (standaard)

Example

#grad {
  background-image: linear-gradient(red, yellow);
{}

Try It Yourself

Lineair kleurverloop - Van links naar rechts

Het volgende voorbeeld toont een lineair kleurverloop die begint in de linkerhoek en begint met rood en overgaat naar geel:

Van links naar rechts

Example

#grad {
  background-image: linear-gradient(to right, red , yellow);
{}

Try It Yourself

Lineair kleurverloop - Diagonaal

Je kunt een diagonaal kleurverloop realiseren door de horizontale en verticale startposities te specificeren.

Het volgende voorbeeld toont een lineair kleurverloop die begint in de linkerbovenhoek (naar de rechterbenedenhoek) en begint met rood en overgaat naar geel:

Van linksboven naar rechterbeneden

Example

#grad {
  background-image: linear-gradient(to bottom right, red, yellow);
{}

Try It Yourself

Gebruik van een hoek

Als je meer controle wilt over de hoek van het kleurverloop, kun je een hoek definiëren om de vooraf gedefinieerde richtingen (omhoog, omlaag, naar rechts, naar links, naar de rechterbenedenhoek, etc.) te vervangen. De waarde 0deg is gelijk aan omhoog (to top). De waarde 90deg is gelijk aan naar rechts (to right). De waarde 180deg is gelijk aan omlaag (to bottom).

180deg

syntaxis

background-image: linear-gradient(angle, color-stop1, color-stop2);

Deze hoek specificeert het hoek tussen de horizontale lijn en de kleurverlooplijn.

Het volgende voorbeeld toont hoe je een hoek kunt gebruiken in een lineair kleurverloop:

Example

#grad {
  background-image: linear-gradient(-90deg, red, yellow);
{}

Try It Yourself

Gebruik van meerdere kleurcodes

Het volgende voorbeeld toont een lineair kleurverloop met meerdere kleurcodes (van boven naar beneden):

Example

#grad {
  background-image: linear-gradient(red, yellow, green);
{}

Try It Yourself

Het volgende voorbeeld toont hoe je een lineair kleurverloop kunt maken met regenboogkleuren en tekst (van links naar rechts):

Kleurverloop achtergrond

Example

#grad {
  background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); 
{}

Try It Yourself

Gebruik van doorzichtigheid

CSS kleurverloop ondersteunt ook doorzichtigheid en kan ook worden gebruikt om een kleurverloop effect te creëren.

Om de doorzichtigheid toe te voegen, gebruiken we de rgba() functie om de kleurcode te definiëren. De laatste parameter van de rgba() functie kan een waarde tussen 0 en 1 zijn, die de doorzichtigheid van de kleur definieert: 0 betekent volledig doorzichtig, 1 betekent volledig kleurrijk (geen doorzichtigheid).

The following example shows a linear gradient starting from the left. It starts completely transparent and then transitions to full red color:

Example

#grad {
  background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
{}

Try It Yourself

Repeated Linear Gradient

repeating-linear-gradient() Function for Repeating Linear Gradient:

Example

Repeated Linear Gradient:

#grad {
  background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
{}

Try It Yourself