CSS-gradiënt maken: lineair, radiaal, conisch – gratis
Gratis, zonder account, werkt in je browser. Ontwerp een lineair, radiaal of conisch verloop met maximaal 8 kleurstops, zie het live en kopieer de CSS. Download het als PNG-achtergrond in gangbare formaten.
Kleurstops
CSS
background: #ff7ac6; background: linear-gradient(135deg, #ff7ac6 0%, #ffe14d 100%);
De eerste regel is een volle kleur voor heel oude apparaten die geen verlopen kunnen tonen.
Begin met een voorinstelling
Gemaakt op je apparaat.
Waarom CSS-gradiëntgenerator gebruiken
- 100% gratis
- Gebruik het zo vaak je wilt. Geen account, geen watermerk, niets te installeren.
- Privé vanaf de basis
- Wat je typt blijft in je browser en wordt nooit naar ons gestuurd.
- Werkt op elk apparaat
- Draait in je browser op Windows, Mac, Linux, Android en iPhone. Geen app nodig.
Zo gebruik je CSS-gradiëntgenerator
- Kies lineair, radiaal of conisch en stel de richting in.
- Kies kleuren en sleep elke stop op zijn plek.
- Kopieer de CSS of download het verloop als afbeelding.
Veelgestelde vragen
- Hoe gebruik ik de CSS?
- Plak hem in de regel voor het element dat je wilt kleuren. De eerste regel is een effen terugvalkleur; de tweede is het verloop.
- Wat is het verschil tussen lineair, radiaal en conisch?
- Lineair loopt over langs een rechte lijn, radiaal spreidt zich uit vanuit het midden en conisch draait rond het midden zoals een kleurencirkel.
- Kan ik transparantie gebruiken?
- Ja. Typ een kleur zoals rgba(47, 91, 255, 0.5) in een stop.
- Wordt er iets geüpload?
- Nee. Verlopen worden op je apparaat gemaakt.
- Is CSS-gradiëntgenerator gratis?
- Ja. Het is gratis te gebruiken, zonder account en zonder iets te installeren.
Vergelijkbare tools
- KleurenpaletgeneratorGenereer kleurenpaletten met één toetsaanslag, zet de kleuren die je mooi vindt vast, of bouw er een vanuit een basiskleur met analoge, complementaire of triadische harmonieën. Exporteer als CSS-variabelen, Tailwind of JSON.
- HEX naar RGB omzettenZet een kleur in één stap om tussen HEX, RGB, HSL, HSV en CMYK, inclusief transparantie. Plak een code in elk formaat of kies een kleur, kopieer het formaat dat je nodig hebt en controleer het tekstcontrast.
- Kleurcontrast controlerenControleer of tekst leesbaar is op de achtergrond met de WCAG-contrastverhouding, zie de AA- en AAA-resultaten voor normale tekst, grote tekst en bedieningselementen, en krijg de dichtstbijzijnde kleur die wel voldoet.