Kleurverloop met gradients

Gradients zijn achtergronden gebaseerd op berekeningen (met kleuren) in plaats van plaatjes of vlakke kleuren.

Linear gradients

Linear gradients hebben een rechtlijnig kleurverloop, horizontaal, verticaal of onder een hoek. Voorbeeld van een verticaal kleurverloop van blauw boven naar wit beneden: background: linear-gradient(to bottom, blue, white);

Voorbeeld van een horizontaal kleurverloop van links blauw naar rechts wit: background: linear-gradient(to right, blue, white);

Voorbeeld van een diagonaal kleurverloop van blauw linksboven naar wit rechtsonder: background: linear-gradient(to bottom right, blue, white);

Voorbeeld van een kleurverloop onder een hoek: background: linear-gradient(70deg, red, white);

Het aantal graden bepaald de hoek tussen een horizontale lijn en de kleurverloop lijn, tegen de klok in. Met 0deg krijg je een verticaal kleurverloop van beneden naar boven, met 90deg krijg je een horizontaal kleurverloop van links naar rechts. met -90deg krijg je het tegenovergestelde kleurverloop van 90deg en met 180deg krijg je het tegenovergestelde kleurverloop van 0deg. Het is ook mogelijk om meer als 2 kleuren te gebruiken, deze hoeven niet allemaal een gelijk deel van het oppervlak te beslaan. Je kunt kleurstoppunten instellen om precies te bepalen waar een nieuwe kleur moet beginnen. Deze kleurstoppunten kunnen als percentage of als absolute lengte worden opgegeven. Als je percentages gebruikt, dan is 0% het beginpunt en 100% het eindpunt, maar je kunt ook waarden gebruiken die hier buiten vallen om een kleurverloop van een bepaalde kleur slechts gedeeltelijk te zien. Voorbeeld met drie kleuren, de laatste kleur begint op 80% vanaf het begin: background: linear-gradient(to bottom, blue, white 80%, red);

Voorbeeld met meerdere kleuren, gelijk verdeeld (daarom geen kleurstoppunten nodig): background: linear-gradient(to right, red, orange, yellow, green, blue);

Meerdere afbeeldingen en kleurverlopen kunnen gestapeld worden door ze met komma's te scheiden. Dit werkt het beste als de kleurverlopen gedeeltelijk doorzichtig zijn. Voorbeeld van een afbeelding met daarbovenop een kleurverloop van links naar rechts van geheel doorzichtig naar geheel ondoorzichtig wit: background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1)), url(plaatjes/voorbeeld.jpg);

Als je meerdere achtergronden opgeeft, dan komt de achtergrond die je het eerst opgeeft bovenop.

Radial gradients

Radial gradients hebben een gekromd verloop. De vorm van een redial gradient kan een cirkel of een ellips zijn. Als je verder niets opgeeft, dan is een ellips ter grootte van het element waar het de achtergrond van is de standaard. De mogelijkheden van een radial gradient lijken verder op die van de linear gradient. Voorbeeld van een gekromd kleurverloop met kleurstoppunten, de eerste kleur begint in het midden: background: radial-gradient(red 5%, yellow 25%, blue 50%);

De straal van de cirkel of ellipse kan worden opgegeven. Dit kan de afstand tot de dichtbijzijnde of verste zijde of hoek zijn van het element dat het vult. Gebruikt kunnen worden: closest-side, farthest-side, closest-corner en farthest-corner. Voorbeeld van een ellipse met de afstand tot de dichtsbijzijnde zijde als straal: background: radial-gradient(ellipse closest-side, red, yellow 10%, blue 50%, white);

Voorbeeld van een ellipse met de afstand tot de verste hoek als straal: background: radial-gradient(ellipse farthest-corner, red, yellow 10%, blue 50%, white);

Voorbeeld van een cirkel met de afstand tot de dichtsbijzijnde zijde als straal: background: radial-gradient(circle closest-side, red, yellow 10%, blue 50%, white);

Repeating linear gradients

Repeating linear gradients zijn linear gradients die herhaald worden. De grootte van het te herhalen kleurverloop wordt bepaald door het laatste kleurstoppunt. Als dat bijvoorbeeld 10px is, dan zal een blok van 10px steeds herhaalt worden. Voorbeeld: background: repeating-linear-gradient(-45deg, blue, blue 5px, white 5px, white 10px);

Voorbeeld met percentages: background: repeating-linear-gradient(red, yellow 10%, green 20%);

Repeating radial gradients

Repeating radial gradients zijn radial gradients die herhaald worden. Voorbeeld: background: repeating-radial-gradient(blue, blue 5px, white 5px, white 10px);