Kleurtools

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.

Type

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

  1. Kies lineair, radiaal of conisch en stel de richting in.
  2. Kies kleuren en sleep elke stop op zijn plek.
  3. 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.