Kleurverloop zie je steeds vaker op WordPress websites. Ik heb wat voorbeelden van kleurverlopen en gradienten verzameld die je met CSS kan maken voor je webdesign en ontwerp van je WordPress website.

Voorbeelden kleurverloop en gradient in webdesign

Bekijk enkele voorbeelden van kleurverloop en gradients in webdesign.
Handleiding zelf kleurverlopen maken met CSS in WordPress

Gradient verloop op Cloud86

Het Gradient verloop op de Cloud86 vind dit een goed praktisch voorbeeld. Het plaatje is een transparant png-bestand.

Dit is de CSS code die gebruikt is:

blue-gradient {
color: #ffffff;
background-image: linear-gradient(-101.64deg,#001F3F 29.26%,#123D69 78.9%);
}

Meer over CSS codes en hoe je dit toepast:

Verloop op Scale API-homepage

Een mooie overgang van mooie, rijke kleuren langs een rechte lijn – als je het niet kunt zien, krijgen we al het gevoel met deze site. Kun je zien wat voor soort gradiënt dit is? Laat je niet misleiden door die diagonale kaarten, het is een lineair verloop dat van boven naar beneden gaat.
Bekijk gradient verloop voorbeeld op website

Verloop op Stripe homepage

Stripe’s gradiëntspel is helder. Ze implementeren verschillende lineaire gradiënten in een gedraaid, rasterpatroon om donkerblauwe tinten vast te leggen die geleidelijk aan vervagen in lichtgroene en aquamarijne tinten. Ze zijn erin geslaagd om scherpe lijnen te definiëren op sommige plekken om hoeken en kleurscheiding te creëren door de transparantie van de richtingen en kleurstops te manipuleren en andere kleuren naadloos te laten vervagen in nieuwe.
Bekijk gradient verloop voorbeeld op website

Verloop op Stripe Connect-pagina

Opnieuw Stripe. Ze gebruiken vaak een verloop, en ik houd van de manier waarop ze hun site hebben ontworpen. Merk op hoe ze een gelijkaardige stijl behouden in elk van hun pagina’s, maar subtiele verschillen implementeren. Een boeiend ontwerp. Hier manipuleren ze een blauw-wit kleurverloop, beginnend met donkerblauw aan de bovenkant en geleidelijk vervagend in een witte kleur naar de onderkant toe en voor de rest van het scrollen. Net als bij hun homepage hebben ze een paar scherpe lijnen in hun kleurverloop aangebracht om de kleuren te scheiden en een golvend lijnpatroon te creëren dat willekeurig lijkt.
Bekijk gradient verloop voorbeeld op website

Verloop op stripe betalingen-pagina

De Stripe betaalpagina. Ze maken niet alleen een mooie overgang van donkergroen, naar lichtgroen, naar wit, ze spelen ook met en manipuleren de patronen binnen het lineaire patroon op de pagina. Ze hebben scherpe kleurstops gemaakt om de kleuren te scheiden en unieke hoeken te creëren, en hebben zelfs een deel van het verloop met kleine, schuine verticale strepen.
Bekijk gradient verloop voorbeeld op website

Gradient op Mixpanel Homepage

Mixpanel is het ultieme lineaire gradiëntontwerp. Zie je hoe het donkerblauw (bijna paars) zo geleidelijk vervaagt in progressief lichter wordende blauwen zo naadloos dat je niet kunt zien waar de ene kleur begint en de andere eindigt? Het gaat een tijdje door terwijl je scrollt, en maakt dan geleidelijk plaats voor een geheel witte achtergrond. Het springt in het oog zodra de pagina wordt geladen, een van de grootste voordelen van het opnemen van een kleurverloop in het ontwerp van uw site.
Bekijk gradient verloop voorbeeld op website

Instagram-logo

Misschien wel de bekendste en meest bekende gradiënt van allemaal, het Instagram-logo. Eenvoudig, prachtig en esthetisch, Instagram nam het idee van de radiale verloop en beheerste het. Het zit hem in zijn eenvoud – je zou het logo gemakkelijk kunnen ontwerpen met de radiale gradiënt technieken die we je hebben geleerd. Het radiale verloop begint met een lichtgeel, oranje in de linkerbenedenhoek van het logo en gaat geleidelijk naar de rechterbovenhoek van het logo en gaat dan over in lichtpaars, fuchsia, roze. Het is onmogelijk om niet te worden getekend naar deze eenvoudige gradiënt binnen hun camera logo.

Instagram-richtlijnen-pagina

Meer Instagram. In de aard van consistente branding (een les die we allemaal zouden moeten leren), hebben ze de gradiënt van hun logo genomen en het toegevoegd aan hun branding richtlijnen pagina. Dezelfde mooie lineaire gradiënt langs een rechte lijn die leidt van de rechter bovenhoek naar de linker benedenhoek. Dezelfde, mooie, rechtlijnige vormgeving. Met dit lineaire ontwerp kan het echt niet misgaan.
Bekijk gradient verloop voorbeeld op website

Spectrumachtergrond

Bekijk de spectrumachtergrond op hun homepage. Dit verloop gaat van een zacht, doorschijnend paars naar een dieper paars, en geleidelijk aan, naar een dieper paars, en is een eenvoudig top- naar radiaalverloop. Een bochtige curve snijdt het verloop af van de rest van de pagina en maakt plaats voor een eenvoudigere witte achtergrond. We denken dat dit een slimme manier is om je oog te laten vallen op de bovenkant van de pagina, terwijl je niet de hele site overspoelt met een donker kleurverlooppatroon.
Bekijk gradient verloop voorbeeld op website

Spectrum

In het midden van Spectrum’s homepage vind je een slimme kleine golvende baan die gevuld is met een andere gradiënt. Dit is een mooie manier om een tweede gradiënt op dezelfde pagina te implementeren. Met een monochromatische benadering heeft het spectrum deze keer een lineair verloop gebruikt, beginnend bij de bovenkant van het golvende vakje met een lichtblauw en bewegend naar dat donkerder paars-blauw.
Bekijk gradient verloop voorbeeld op website

3D Voor ontwerpers Kop

Deze website implementeert niet een hele gradiënt achtergrond, in plaats daarvan zet ze een eenvoudige, dunne lijn aan de bovenkant van de pagina die geleidelijk aan de kleur van licht paars naar lichtgroen overgaat. In de code noemt men dit “rainbow header” wat een perfecte beschrijving is van deze leuke pasteltinten. Het past bij het kleurenschema van haar merk, betrekt het publiek erbij en overweldigt niet.
Bekijk gradient verloop voorbeeld op website

3D Voor ontwerpers E-mailformulier

Een mooie, technicolor-gradiënt. Maar deze keer, super transparant en getransponeerd over een afbeelding. Het gaat geweldig met het thema van het merk en implementeert een leuke manier om een afbeelding op de pagina te zetten. Die lineaire kleurverloop selectie is ook super boeiend. Van het heldere paars dat naar het transparante, limoengroene gaat, ben ik wel gecharmeerd.
Bekijk gradient verloop voorbeeld op website

EthWorks

Ethworks uit Polen (!) wist wat het deed toen het het glijdende parallellogram (met behulp van Rellax) ontwerp bovenaan hun homepage ontwierp. Dit is een gradiënt in tegenstelling tot andere die we hebben gezien, en een creatieve manier om de eenvoudige codering die we hebben doorgewerkt op een unieke, ingewikkelde manier te implementeren.
Bekijk hun gebruik van lichte, pastelkleuren met scherpe hoeken en onderscheidingen, evenals hun geleidelijke kleurverloop van de bovenkant van de pagina naar de onderkant.
Bekijk gradient verloop voorbeeld op website →

Baremetrics

Wat we het leukst vinden aan de Baremetrics-verloop is het eenvoudige en subtiele ontwerp. Als je de pagina op het volledige scherm bekijkt, zie je een ronde lijn die de achtergrond tussen twee kleuren verdeelt – wit en paars. Deze eenvoudige verdeler creëert een trekkracht in de richting van de tekst en zorgt voor een mooie, ongecompliceerde manier om uw publiek te betrekken en te tekenen in uw website.
Bekijk gradient verloop voorbeeld op website

Algola

Deze website gebruikt hun verloopjes op zo’n eenvoudige, subtiele en opvallende manier. In plaats van een kleurverloop over hun hele achtergrond te gooien of het over hun afbeeldingen te maskeren, gebruiken ze het in plaats daarvan op hun knoppen en buttons! We houden van dit innovatieve ontwerp. Het geeft hun strakke pagina een vleugje kleur en brengt een unieke kijk op lineaire gradiënten in het ontwerp van een website.
Bekijk gradient verloop voorbeeld op website

Indie-hackers

Verlopen zie je dus steeds vaker. Courtland wil echt de nadruk leggen op de oproepen tot acties op de pagina en wat is een betere manier dan een paar mooie knoppen en buttons. Voor het grootste deel is de gebruikersinterface van de website een ingetogen diepblauw, maar als je over de site heen scrollt, wordt je oog meteen in de prachtige prominente knoppen getrokken. Marketing + design + ontwikkeling schittering.
Bekijk gradient verloop voorbeeld op website

Conclusie over verlopen

Het idee hier is dat CSS Gradients steeds vaker ziet anno 2020, en we kunnen garanderen dat je ze ook veel meer gaat opmerken! Verlopen kun je goed gebruiken om accenten te leggen op onderdelen van je website om zo je conversie te verhogen.

Meer tips voor WordPress webdesign en ontwerp