Gradient (kleurverloop) met CSS

Een gradiënt is een kleurverloop. Dat kun je met photoshop maken, maar het kan ook met CSS. In deze tutorial vertel ik je hoe je een CSS gradiënt maakt.

In dit artikel lees je:

• Dat je “linear-gradient” kunt toevoegen aan je background voor een mooie verloopkleur
• Dat je ook meer dan 2 kleuren kunt gebruiken
• Dat je een cirkelvormige gradiënt krijgt als je linear-gradient verandert in radial-gradient
• Dat een diagonale gradiënt krijgt door een hoek toe te voegen
• Dat je een gradiënt van links naar rechts kunt laten lopen door “left” toe te voegen

CSS3 gradiënt

Met de volgende code creeer je een gradient van boven naar beneden.

Zoals je ziet creëer je met deze regel code een kleurverloop van geel (kleurcode #ffdd00) naar oranje (kleurcode #ff5d00). Je begint met “background: ” om aan te geven dat het de achtergrondkleur betreft, vervolgens “linear-gradient” en vervolgens de kleuren die je wilt gebruiken tussen haakjes en gescheiden door een komma.

Uiteraard voeg je deze code toe aan het element waar je de achtergrond van wilt instellen, dus als je deze achtergrond wilt toevoegen aan een rij met de class “row” is de code:

.row {
background: linear-gradient(#ffdd00, #ff5d00);
} 

Meer dan 2 kleuren gebruiken

Je kunt echter ook meer dan 2 kleuren gebruiken, zoals in bovenstaand voorbeeld waarin de kleur rood (kleurcode #ff0000) is toegevoegd. Het enige wat je hoeft te doen is meer kleurcodes toe te voegen, gescheiden door een komma.

.row {
background: linear-gradient(#ffdd00, #ff5d00, #ff0000);
} 

Een cirkel of ovaal vormige gradiënt

Naast een gradiënt van boven naar onder (linear-gradient) kun je ook een cirkel (of ovaal) vormige gradiënt instellen. Daarvoor gebruik je radial-gradient in plaats van linear-gradient.

.row {
background: radial-gradient(#ffdd00, #ff5d00, #ff0000);
} 

Een diagonale gradiënt

Of een diagonale gradiënt:

.row {
background: linear-gradient(20deg, #123dfa, #ff0000, #F9C, #FF0);
} 

Ik heb hier wat fellere kleuren gebruikt voor de duidelijkheid, en nog een kleurtje toegevoegd gewoon omdat het kan 😉

De eigenschap deg geeft het aantal graden dat de hoek moet zijn aan, in dit geval 20 graden. Standaard is de hoek 90 graden, van boven naar beneden. Door een negatieve waarde op te geven lopen de kleuren van rechtsboven naar linksonder:

.row {
background: linear-gradient(-20deg, #123dfa, #ff0000, #F9C, #FF0);
} 

Zoals je ziet wordt ook de volgorde van de kleuren omgekeerd.

Een gradiënt van links naar rechts

Daarnaast kun je ook een CSS gradiënt van links naar rechts instellen door de eigenschap “to right” toe te voegen:

.row {
background: linear-gradient(to right, #123dfa, #ff0000, #F9C, #FF0);
} 

En zo zijn er nog een aantal andere eigenschappen zoals “to left” (van rechts naar links), “to bottom right”, “to top left” enzovoorts.

Dit artikel is een leuk begin om de vele mogelijkheden van de CSS 3 gradiënt eigenschap te verkennen. Er is echter nog heel veel meer mogelijk. Kijk bijvoorbeeld maar eens op deze (Engelstalige) site, of gebruik een gradient generator om de juiste code automatisch te genereren.
Dat laatste kan je favoriete AI natuurlijk ook voor je doen.