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 onderstaand 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.
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.
Een diagonale gradiënt
Of een diagonale gradiënt:
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:
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 left” toe te voegen:
En zo zijn er nog een aantal andere eigenschappen zoals “to right”, “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 gewoon een gradient generator of de juiste code automatisch te genereren.
Hulp nodig met je website?
Dit artikel is geschreven door Bob de webbouwer, een allround website expert die regelmatig blogt over allerlei onderwerpen die je helpen bij (het bouwen van) jouw website. Heb je hulp nodig? Huur Bob de webbouwer dan in om een website voor je te bouwen, jouw website te verbeteren of een training over dit onderwerp te verzorgen.
Vraag direct een vrijblijvende offerte aan
Heeft dit artikel je zo goed geholpen dat je mij niet meer nodig hebt?
Een kleine eenmalige donatie wordt altijd zeer op prijs gesteld 🙂
Geef een reactie