Softonic

CSS-gradiëntgenerator

Stap 1 / 3
Type
Volgende

Moderne interface-achtergronden gebruiken zelden een egale kleur; heldensecties, knoppen en kaarten gebruiken bijna altijd een CSS-gradiënt. Met deze generator kies je een lineaire of radiale gradiënt, voeg je zoveel kleurstops toe als je wilt, stel je de hoek (voor lineair) of de vorm (voor radiaal) in, en kopieer je een nette background: linear-gradient(…)-waarde die je direct in je stylesheet kunt plakken.

Hoe je een CSS-gradiënt bouwt

  1. 1

    Kies het gradiënttype

    Lineair (richting via hoek) of radiaal (cirkel/ellips).

  2. 2

    Stel de hoek of vorm in

    Lineair: 0–360°. Radiaal: cirkel of ellips.

  3. 3

    Kleurstops toevoegen

    Elke stop bestaat uit een kleur plus een positie (0–100%). Gradiënten met twee stops vormen de basis; drie of meer stops zorgen voor vloeiendere overgangen.

  4. 4

    Kopieer de CSS

    Het resultaat is één enkele waarde voor de eigenschap `background` die je in elk CSS-bestand kunt plakken.

Syntaxis-spiekbriefje

/* Lineair */
background: linear-gradient(135deg, #6366F1 0%, #EC4899 100%);

/* Radiaal (cirkel) */
background: radial-gradient(circle at center, #6366F1 0%, #EC4899 100%);

/* Meerdere stops */
background: linear-gradient(90deg, #fff 0%, #f59e0b 50%, #ef4444 100%);

Hoeken die echt met je intuïtie kloppen

De hoeken van een CSS-gradiënt verschillen van die in de trigonometrie: 0deg wijst naar boven (noord), 90deg naar rechts (oost), 180deg naar beneden en 270deg naar links.

Richting Hoek
Van boven naar beneden 180deg
Van beneden naar boven 0deg
Van links naar rechts 90deg
Van linksboven naar rechtsonder 135deg

Modderige middentonen vermijden

Lineaire gradiënten tussen complementaire kleuren (bijvoorbeeld blauw → oranje) lopen rond de 50% door een grijze band waar de menging ‘dood’ aanvoelt. Los dit op door:

  • Een tussenstop toe te voegen in een verwante kleurtoon (blauw → paars → oranje).
  • OKLCH-interpolatie te gebruiken (linear-gradient(in oklch, ...)) voor perceptueel vloeiendere overgangen, ondersteund in alle moderne browsers sinds 2024.
  • Eén uiteinde iets in kleurtoon te verschuiven, zodat de middentoon in een warmere familie valt.

Prestatietip

Gradiënten worden door de GPU getekend en zijn meestal goedkoop. Toch kan het animeren van een gradiënt (background-position-trucs, SVG-blur) de tekenkosten opdrijven, test het op een middenklassetelefoon voordat je live gaat.

Veelgestelde vragen

CSS-gradiënten meten de hoek met de klok mee vanaf de bovenkant, terwijl de standaardwiskunde tegen de klok in vanaf rechts meet. In CSS wijst 90deg naar rechts; in de trigonometrie zou dat 0° zijn.

De specificatie stelt geen beperking op het aantal stops. In de praktijk gaat meer dan vier à vijf stops al snel op een regenboog lijken; twee of drie goed gekozen stops zien er bijna altijd strakker uit.

Ja, plak het als een arbitraire waarde: class="bg-[linear-gradient(135deg,#6366F1,#EC4899)]". Voor herbruikbare gradiënten definieer je een eigen utility in je Tailwind-configuratie.

De gewone editor stuurt de gradiëntinstellingen naar de server om het voorbeeld te tonen. In de begeleide stroom staan type, hoek, vorm en kleurstops ook in de pagina-URL. Vul geen gevoelige informatie in; de tool bewaart geen herbruikbaar gradiëntproject.

Gerelateerde tools

ASCII-tabelreferentie

Volledige ASCII-tabel van 0 tot 127 met decimale, hexadecimale, octale en binaire waarden en HTML-numerieke referentienotatie, inclusief control codes zoals NUL, LF en DEL.

HTML-tekenreferentie

Een doorzoekbare lijst met HTML-entiteiten, hun benoemde en numerieke codes, plus kopiëren met één klik voor speciale tekens en symbolen.

Sneltoetsenoverzicht

Zoek gedocumenteerde standaardsneltoetsen voor VS Code, Chrome en Bash met GNU Readline op macOS, Windows en Linux.

EditorConfig-generator

Genereer een .editorconfig-bestand met uw regels voor inspringstijl en -grootte, regeleinde, tekenset en witruimte voor consistente opmaak in alle IDE's en editors.

E-mailvalidator

Valideer een e-mailadres: RFC 5322-syntaxcontrole, live MX-record-zoekopdracht, plus details over lokaal deel, domein en lengte. Er wordt geen e-mail verstuurd.

ASCII naar binair-converter

Converteer elke ASCII-string naar zijn binaire representatie. Elk teken wordt acht bits, gescheiden door spaties, klaar voor protocoltrace of huiswerk.

Tool beschikbaar in andere talen