Browse categories

CSS-gradiëntgenerator

Maak browserveilige CSS-gradiënten volledig in uw browser.

Live gradient preview
Customization

Color stops

Ready to use

CSS

90° linear
background: linear-gradient(90deg, #2A7B9B 0%, #57C785 50%, #EDDD53 100%);

Change a color to update the gradient.

Hoe dit te gebruiken generator

  1. Kies de lineaire of radiale modus, pas een voorinstelling toe of bewerk elke kleurstop afzonderlijk en pas vervolgens de posities en hoeken aan waar nodig.
  2. Het live resultaat controleren en 'Resultaat kopiëren' gebruiken wanneer u het wilt delen.

Hoe generator works

De live preview- en stopknoppen genereren een standaard CSS-achtergronddeclaratie zonder voorvoegsel die kan worden gekopieerd of gedownload.

Stap voor stap generation

  1. Kies de lineaire of radiale modus, pas een voorinstelling toe of bewerk elke kleurstop afzonderlijk en pas vervolgens de posities en hoeken aan waar nodig.
  2. De live preview- en stopknoppen genereren een standaard CSS-achtergronddeclaratie zonder voorvoegsel die kan worden gekopieerd of gedownload.
  3. Controleer het weergegeven resultaat en kopieer het indien nodig.

Uitgewerkt voorbeeld

Een lineair verloop van 135 graden kan verschillende kleurpunten in elkaar laten overlopen, zoals blauw op 0%, groen op 50% en geel op 100%.

Risicorichtlijnen

Veelgestelde vragen

Verstuurt deze tool mijn invoer ergens naartoe?

Nee. De interactieve berekening wordt in uw browser uitgevoerd en deze site verzendt geen invoergegevens naar een backend.

Hoe moet ik het resultaat gebruiken?

Controleer of de ingevoerde eenheden en waarden overeenkomen met uw situatie, met name wat betreft datums, pauzes en afronding.

Gerelateerde tools