CSS-gradiëntgenerator
Bouw een gradiënt visueel op en kopieer de CSS.
- Draait in je browser — je tekst wordt nergens naartoe gestuurd
- Geen aanmelding, geen quota, gratis te gebruiken zo vaak je wilt
Hoe het werkt
Gradiënten worden in CSS geschreven als één declaratie waarvan de syntaxis makkelijk verkeerd wordt onthouden, vooral de hoekconventie en waar de kleurstops komen. Het resultaat zien tijdens het aanpassen is sneller dan een pagina herladen om het te controleren.
De hoekconventie verrast mensen
In CSS wijst 0 graden omhoog en neemt de hoek toe met de klok mee, dus 90 graden loopt van links naar rechts en 180 graden van boven naar beneden. Dat verschilt van de wiskundige conventie en van verschillende ontwerptools, en daarom komt een gradiënt die ergens anders is gekopieerd vaak gedraaid uit de bus.
De drie typen
Lineair loopt langs een rechte lijn en dekt vrijwel elk echt gebruik. Radiaal verspreidt zich vanuit een punt naar buiten, wat past bij gloeden en spotlights. Conisch zwaait rond een middelpunt en is waarvan cirkeldiagrammen en kleurenwielen zijn gebouwd.
Een gradiënt is een afbeelding, geen kleur
Dit is het andere waar mensen over struikelen. CSS behandelt een gradiënt als een achtergrondafbeelding, dus het werkt in background en background-image maar niet in color, border-color of iets anders dat een gewone kleur verwacht. Tekstgradiënten hebben background-clip nodig, wat een aparte techniek is.
Een middelste kleur toevoegen
Twee stops geven een schone overgang. Met een derde laat je de overgang via een andere tint lopen, wat het modderige grijs voorkomt dat ontstaat als twee tegengestelde kleuren rechtstreeks in elkaar overlopen.
CSS-gradiëntgenerator — vragen
Welke kant gaat de hoek op?
0 graden wijst omhoog en hoeken nemen toe met de klok mee, dus 90 graden loopt van links naar rechts.
Waarom werkt mijn gradiënt niet op tekst?
Een gradiënt is een achtergrondafbeelding, geen kleur. Tekstgradiënten hebben als aparte stap background-clip nodig.
Wanneer moet ik radiaal of conisch gebruiken?
Radiaal voor gloeden en spotlights, conisch voor cirkeldiagram- en kleurenwielvormen. Lineair dekt de meeste andere gevallen.