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

JSON naar PHP-array

Zet JSON om naar een PHP-array-literal met korte syntaxis, associatieve/geïndexeerde arrays en geneste structuren, klaar om in een .php-bestand te plakken.

Luhn-algoritme-checker

Controleer de creditcardnummer, IMEI, SIN en andere door Luhn beschermden nummers. Geef een resultaat terug (goed of fout) en toon elke stap van het verdubbelen en het berekenen van de controlesom aan.

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.

Telefoonnummers controleren

Controleer de structuur van telefoonnummers per land en bekijk regio, type en E.164-, internationale, nationale en RFC 3966-notatie.

SVG-golfgenerator

Genereer een vloeiende SVG-golfscheiding voor headers en footers met instelbare amplitude, frequentie, kleur en positie boven of onder. Kopieer de SVG-code.

Sneltoetsenoverzicht

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

Tool beschikbaar in andere talen