CSS-verloopgenerator

Zo gebruik je het

1. Begin bij een voorinstelling of het standaardverloop.
2. Klik op de balk om kleuren toe te voegen; sleep de stops om ze te verplaatsen.
3. Kies Lineair, Radiaal of Conisch en pas de hoek of het midden aan.
4. Kopieer de CSS-declaratie of de Tailwind-klasse.

Opties uitgelegd

Lineair

Kleuren veranderen langs een rechte lijn. 0° gaat omhoog, 90° naar rechts en 180° naar onderen.

Radiaal

Kleuren verspreiden zich vanaf een middelpunt als een cirkel of een ellips die het element vult.

Conisch

Kleuren draaien rond een middelpunt, zoals een kleurenwiel of taartdiagram.

Herhalen

Herhaalt het patroon; zet stops binnen een klein bereik, zoals 0% tot 10%, om strepen te maken.

Hoe de gegenereerde code eruitziet

Dezelfde twee kleuren, geschreven door elk type. Stops worden altijd met een positie in procenten geschreven:

linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%)
radial-gradient(ellipse at 50% 50%, #ff7e5f 0%, #feb47b 100%)
conic-gradient(from 0deg at 50% 50%, #ff7e5f 0%, #feb47b 100%)
repeating-linear-gradient(45deg, #000000 0%, #ffffff 10%)

De Tailwind-versie verpakt dezelfde waarde in een klasse met een willekeurige waarde. Spaties worden underscores en de spaties na komma’s worden verwijderd:

bg-[linear-gradient(135deg,#ff7e5f_0%,#feb47b_100%)]

In de laatste CSS-regel herhaalt het patroon zich elke 10% van het element, wat dunne strepen geeft. Bij conische verlopen is de hoek waar de zwaai begint, en bij radiale verlopen zijn de twee percentages het middelpunt.

Veelgestelde vragen

Privacy

Deze tool draait volledig in je browser. Je bestanden en tekst worden op je eigen apparaat verwerkt en nooit naar onze servers geüpload.