CSS-verloopgenerator — lineaire, radiale en conische verlopen met live voorbeeld

Wat het doet

Met de CSS-verloopgenerator ontwerpt u een verloop op het oog en kopieert u de uiteindelijke CSS. Kies een lineair, radiaal of conisch verloop, voeg zoveel kleurstops toe als u wilt, versleep hun posities, stel de hoek of het middelpunt in en het voorbeeld werkt direct bij. U kunt ook een bestaande linear-gradient(…), radial-gradient(…) of conic-gradient(…) plakken en visueel bewerken. Alles draait in uw browser.

Zo gebruikt u het

Begin met een preset of houd het voorbeeldverloop.
Kies het Type. Lineaire en conische verlopen hebben een hoek; radiale en conische verlopen hebben een middelpunt dat u verplaatst met Midden X en Midden Y.
Bewerk de Kleurstops: wijzig een kleur met de kiezer of typ een CSS-kleur, versleep Positie, gebruik + Stop toevoegen om er een in het grootste gat te zetten en Omkeren om de volgorde om te draaien.
Zet Herhalen aan om het verloop te tegelen voor strepen en ringen.
Kopieer de code uit de kaart CSS, eventueel met een effen terugvalkleur voor heel oude browsers.

Het vak Verloop-CSS onderaan toont de waarde van het verloop en is bewerkbaar: plak een verloop uit uw stylesheet of ontwerptool en de bedieningselementen nemen het over.

Voorbeeld

.hero {
  background-color: #667eea;
  background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

Tips voor mooie verlopen

Houd het subtiel. Twee naburige tinten (blauw naar paars, oranje naar roze) ogen zachter dan tegenovergestelde kleuren, die in het midden modderig grijs kunnen worden.
Voeg een middelste stop toe om de menging te sturen. Een derde stop die iets lichter is dan zijn buren geeft een zacht hooglicht.
Harde stops maken vormen. Stops op dezelfde positie geven scherpe randen: strepen, vlaggen, voortgangsbalken en taartdiagrammen gebruiken deze truc.
Richtingen. to right is gelijk aan 90deg en to bottom (de standaard) aan 180deg. Hoeken lopen met de klok mee vanaf boven.
Tekst op een verloop moet over het hele verloop leesbaar blijven. Vergelijk de lichtste en donkerste stop met de tekstkleur in een contrastcontrole.

Veelgestelde vragen

› Wat is het verschil tussen lineaire, radiale en conische verlopen?

Een lineair verloop mengt kleuren langs een rechte lijn onder een hoek. Een radiaal verloop spreidt zich vanuit een middelpunt uit als cirkel of ellips. Een conisch verloop draait als de wijzers van een klok rond een middelpunt en is ideaal voor kleurenwielen en taartdiagrammen.

› Hoe maak ik scherpe strepen in plaats van een zachte overgang?

Geef twee naburige stops dezelfde positie, bijvoorbeeld red 50% en blue 50%. De kleur verspringt dan op dat punt. Zet Herhalen aan om het patroon te herhalen; zo maak je strepen in CSS.

› Kan ik transparante kleuren gebruiken?

Ja. Typ elke CSS-kleur in een stop, ook rgba(), hsl() met alfa, hex met 8 cijfers of transparent. De kleurkiezer behoudt de alfa die u instelt, en het voorbeeld toont een dambord achter transparante delen.

› Heb ik nog vendor-prefixen of een terugvalkleur nodig?

Prefixen zijn niet nodig: alle huidige browsers ondersteunen lineaire, radiale en conische verlopen zonder prefix. De optionele effen terugvalkleur is alleen van belang voor heel oude browsers of programma’s die background-color lezen, zoals sommige e-mailprogramma’s.