Handytool
OntwikkelaarGratisLokaal uitvoeren

CSS gradient generator

Maak lineaire, radiale en conische CSS gradients — sleep stops, kies kleuren, kopieer de CSS.

Voorbeeld
CSS
background: linear-gradient(135deg, #B7FF3E 0%, #0a0a0a 100%);
Type
Voorinstellingen

Voeg tot zes kleurstops toe, sleep de positieschuifregeling en kopieer het CSS.

Over CSS gradient generator

Handytool's CSS gradient generator bouwt lineaire, radiale en conische gradients met tot zes kleurstops. Sleep een stop-positie, wijzig de kleur, zet het gradient-type om en de live preview en CSS-declaratie worden instant bijgewerkt. Begin met een van de ingebouwde presets — Lime Swiss, Sunset, Sky, Aurora — of ontwerp je eigen vanaf nul.

Functies van CSS gradient generator

  • 01

    Lineair, radiaal en conisch

    Lineair is de dagelijkse achtergrondgradient; radiaal is geweldig voor highlights en vignettes; conisch is perfect voor pie charts, kleurwielels en roterende achtergronden.

  • 02

    Tot zes kleurstops

    Voeg stops toe en verwijder ze, stel elke positie in met een schuif en kies de kleur via de systeemkleurpicker of een hex-waarde. Stops sorteren automatisch op positie.

  • 03

    Kopieerbare CSS declaratie

    De uitvoer is een volledige background: ... declaratie die je rechtstreeks in een stylesheet, een gestijlde component of een Tailwind arbitraire-waardeklasse kunt plakken.

Veelgestelde vragen over CSS gradient generator

Wat is het verschil tussen lineair, radiaal en conisch?
Lineaire gradients lopen in een rechte lijn onder een gegeven hoek; radiale gradients stralen van het midden uit; conische gradients zwaaien rond een punt als een klokhand. Elk één past in een ander visueel effect.
Hoeveel kleurstops zou ik moeten gebruiken?
Twee stops is de klassieke twee-kleurgradient. Drie of vier stelt je in staat om realistische overgangen te creëren (zonsondergang, aurora). Meer dan zes ziet er meestal lawaaierig uit — daarom begrenst deze generator tot zes.
Kan ik dit gebruiken voor achtergronden in een e-mailtemplate?
De meeste e-mailclients ondersteunen nog steeds moderne CSS-gradients niet betrouwbaar — voeg een stevige fallback-kleur toe in aanvulling op de achtergrondgradient als je dit in een e-mailtemplate kopieert.
Is de uitvoer pixel-nauwkeurig?
Ja — het preview wordt weergegeven door de native gradient-engine van de browser, dus wat je ziet is wat je CSS zal produceren.

Gerelateerde tools

Ontwikkelaar →

Ontdek meer tools

Alle tools →