CSS-verloopgenerator: schrijf verlopen met de hand of met tools

Een CSS-verloopgenerator geeft je een verloopwaarde om te plakken, zoals linear-gradient(135deg, #1e1b4b 0%, #6d28d9 100%), nadat je kleuren en een hoek hebt gekozen. Het is een prima beginpunt. Maar een CSS-verloop is kort genoeg om in minder dan een minuut met de hand te schrijven, en in met de hand geschreven code zitten de verbeteringen: een derde stop, een betere kleurruimte, een tweede laag. Deze pagina laat zien hoe je generatoruitvoer leest, opschoont en je eigen verloop schrijft.

De vier onderdelen van elk CSS-verloop

.hero {
  background-image: linear-gradient(
    160deg            /* 1. direction: an angle or "to right" */
    in oklch,         /* 2. optional: the colour space to blend in */
    #1e1b4b 0%,       /* 3. colour stops: colour and position */
    #6d28d9 55%,
    #f472b6 100%
  );
}

/* 4. the type: linear, radial or conic */
.glow { background-image: radial-gradient(circle at 80% 20%, #f472b6, #1e1b4b 70%); }
.dial { background-image: conic-gradient(from 90deg, #6d28d9, #f472b6, #6d28d9); }

Elk type heeft een eigen gids: lineaire verlopen, radiale verlopen en conische verlopen.

Verlooprecepten om te kopiëren

Deze zijn met de hand geschreven in plaats van gegenereerd, en elk gebruikt één idee dat een eenvoudige generator zelden geeft: een licht naast het midden, drie stops in plaats van twee, of een gekozen kleurruimte. Klik op een recept om het te kopiëren.

Generatoruitvoer opschonen

Plak je iets uit een oudere generator, dan krijg je misschien vijf regels waar er één volstaat. Verlopen met voorvoegsel en het Internet Explorer-filter zijn al jaren overbodig; ze maken het zwaarder en het oude -webkit--syntax gebruikt een ander hoeksysteem dat iedereen verwart die het later bewerkt.

.hero {
  background-color: #1e1b4b; /* shows while loading and if the gradient fails */
  background-image: linear-gradient(160deg, #1e1b4b 0%, #6d28d9 55%, #f472b6 100%);
}

Je browser is ook een redelijke generator. Open de ontwikkelaarstools, selecteer het element en klik in het paneel Styles op een kleurstaaltje in het verloop: je krijgt een kleurkiezer voor die stop en kunt hoeken en percentages ter plekke aanpassen terwijl de pagina live meebeweegt. Kopieer de afgewerkte waarde terug naar je stylesheet. Om een verloop af te stemmen op echte inhoud wint dat van elke losse tool, want je ziet het achter je eigen kop.

Vijf aanpassingen die elke schuifregelaar verslaan

1. 1

   Voeg een middelste stop toe

   Twee stops geven een rechte helling. Een derde kleur op ongeveer 50 tot 60 procent voegt diepte toe en laat je bepalen waar de verandering plaatsvindt.

2. 2

   Kies de kleurruimte

   Voeg in oklab toe om overgangen tussen verre kleuren zuiver te houden, of in oklch om de tint te laten reizen. Verloopinterpolatie laat het verschil zien.

3. 3

   Verplaats het licht naast het midden

   Vervang een lineair verloop door radial-gradient(circle at 80% 20%, ...) zodat de helderste kleur uit een hoek komt, als een lichtbron.

4. 4

   Laag twee of drie verlopen

   Scheid meerdere waarden in background-image met komma’s. Radiale gloeden over een lineaire basis ogen veel rijker dan één verloop; CSS-meshverlopen gaan hier verder mee.

5. 5

   Voeg een beetje korrel toe

   Een vage ruislaag verbergt banding op grote, donkere verlopen. De code staat in CSS-ruistextuur.

.hero {
  background-color: #0f0b1e;
  background-image:
    radial-gradient(circle at 80% 15%, #f472b6 0%, transparent 40%),
    radial-gradient(circle at 15% 85%, #4338ca 0%, transparent 45%),
    linear-gradient(160deg, #0f0b1e 0%, #1e1640 100%);
}

Een verloop omzetten in een herbruikbaar token

Als een verloop klopt, geef het dan een naam. Een custom property bevat de hele waarde, zodat knoppen, banners en de hero het kunnen delen en een herontwerp één regel raakt. CSS-variabelen voor theming laat zien hoe je verlooptokens per merk of modus verwisselt.

:root {
  --gradient-brand: linear-gradient(160deg, #1e1b4b 0%, #6d28d9 55%, #f472b6 100%);
}

.hero { background-image: var(--gradient-brand); }
.badge { background-image: var(--gradient-brand); }

Wanneer een generator niet het juiste hulpmiddel is

Generators en met de hand geschreven CSS delen dezelfde grens: het resultaat is een lijst stops die iedereen in je stylesheet kan lezen en hergebruiken. Voor interfacedetails is dat prima. Voor de achtergrond waaraan mensen je herkennen, op je site en in elke post, wil je misschien iets rijkers en moeilijkers te kopiëren. Het bredere advies staat in een verloopgenerator gebruiken.

De Marks van Gradiently gaan verder dan wat CSS kan beschrijven: gestapelde materialen, licht, korrel en beweging, live gerenderd op elk formaat, met telkens precies één eigenaar. Je kunt met elke vrije Mark gratis ontwerpen en in de Markt op kleurwoorden zoeken om er een te vinden die dicht bij het verloop komt dat je probeerde te schrijven.