CSS lineair-gradient() functie

Definitie en gebruik

CSS linear-gradient() De functie wordt gebruikt om een lineair gradieent als achtergrond te maken.

Om een lineair gradieent te maken, moet je ten minste twee kleurindicators definiëren. Een kleurindicator is de kleur die je wilt laten overgaan in een soepele transitie. Je kunt ook de startpunt en de richting (of hoek) en het gradieenteffect instellen.

Lineair gradieent voorbeeld:

Voorbeeld

Voorbeeld 1

Deze lineair gradieent begint aan de top. Het verandert van rood naar geel, en vervolgens naar blauw:

#grad {
  background-image: lineair-gradieent(rood, geel, blauw);
}

Probeer het zelf

Voorbeeld 2

Een lineair gradieent die begint aan de linkerkant. Het verandert van rood naar blauw:

#grad {
  background-image: lineair-gradieent(to right, rood, blauw);
}

Probeer het zelf

Voorbeeld 3

Een lineair gradieent die begint aan de linkerkantboven (en zich uitstrekt naar de rechteronderhoek):

#grad {
  background-image: lineair-gradieent(to bottom right, rood, blauw);
}

Probeer het zelf

Voorbeeld 4

Een lineair gradieent met een gespecificeerde hoek:

#grad {
  background-image: lineair-gradieent(180deg, rood, blauw);
}

Probeer het zelf

Voorbeeld 5

Een lineair gradieent met meerdere kleurindicators:

#grad {
  background-image: lineair-gradieent(to right, rood, oranje, geel, groen, blauw, indigo, vioolt);
}

Probeer het zelf

Voorbeeld 6

Een lineaire gradient met twee locaties van de kleurindicator:

#grad {
  background: linear-gradient(
    naar rechts,
    red 17%,
    orange 17% 34%,
    yellow 34% 51%,
    green 51% 68%,
    blue 68% 84%,
    indigo 84%
  );
}

Probeer het zelf

Voorbeeld 7

Een lineaire gradient met doorzichtigheid:

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

Probeer het zelf

CSS syntaxis

linear-gradient(side-or-corner, angle, color-stop1, color-stop2, ...);

Technische details

Browserondersteuning

De cijfers in de tabel geven de browserversie aan die de functie volledig ondersteunt.

Gerelateerde pagina's

Handleiding:CSS kleurverloop

Referentie:CSS background-image Eigenschap

Referentie:CSS conische gradient() functie

Referentie:CSS radiaal gradient() functie

Referentie:CSS herhalende conische gradient() functie

Referentie:CSS herhalende lineaire gradient() functie

Referentie:Biedt referentie: