Gradiëntgenerator: waar dit voor dient
Een gradiënt met de hand schrijven betekent CSS bewerken, opslaan en herladen tot de hoek klopt. Deze generator geeft een live voorbeeld: kies het type, de hoek en de kleurstops, bekijk het resultaat en kopieer productieklare CSS, zonder voorvoegsels en compatibel met alle huidige browsers.
Gradiëntgenerator: hoe het werkt
- Kies een lineaire of radiale gradiënt.
- Pas de hoek aan als het lineair is.
- Voeg kleurstops toe en versleep hun positie.
- Kopieer de gegenereerde CSS rechtstreeks naar je stylesheet.
Veelgestelde vragen
Hoe werken gradiënthoeken in CSS?
0deg wijst naar boven en hoeken lopen op met de klok mee, dus 90deg loopt van links naar rechts en 180deg van boven naar beneden. Dat wijkt af van de wiskundige conventie en zorgt vaak voor verwarring.
Waarom ziet mijn gradiënt er dof uit in het midden?
Omdat interpoleren in sRGB door een verzadigingsarm tussenpunt gaat, vooral tussen complementaire kleuren. Een extra tussenstop toevoegen, of oklch-interpolatie gebruiken in moderne browsers, lost dat op.
Zijn browservoorvoegsels nog nodig?
Nee. linear-gradient en radial-gradient zonder voorvoegsel worden al jaren door elke actuele browser ondersteund. Voorvoegsels voegen alleen gewicht toe.
Kan een gradiënt geanimeerd worden?
Niet rechtstreeks met een transition, omdat background-image niet interpoleert. De gangbare truc is background-position animeren op een te grote gradiënt, of geregistreerde custom properties met @property gebruiken.