Softonic

CSS-gradiëntgenerator

Stap 1 / 2
Volgende

Een gradiënt kan knoppen, kaarten, hero-secties en badges een verzorgde uitstraling geven zonder één afbeeldingsbestand. Deze generator schrijft de CSS voor u: kies een lineaire of radiale gradiënt, selecteer twee kleuren, stel indien nodig de hoek in en kopieer de resulterende background-declaratie direct naar uw stylesheet.

Zo bouwt u een gradiënt

  1. 1

    Kies het gradiënttype

    Lineair voor een rechte overgang langs een hoek, of radiaal om de kleuren vanuit een middelpunt naar buiten te verspreiden.

  2. 2

    Kies twee kleuren

    Voer twee hexadecimale kleuren in (bijvoorbeeld #2563eb en #16a34a) in de twee kleurvelden.

  3. 3

    Stel de hoek in (alleen lineair)

    De hoek in graden: 0deg wijst omhoog, 90deg naar rechts, 180deg naar beneden. Radiale gradiënten negeren de hoek.

  4. 4

    Genereer de CSS

    De tool bouwt de `background:`-declaratie met uw waarden.

  5. 5

    Kopieer de code

    Kopieer de declaratieregel en plak deze in uw stylesheet, binnen de regel voor het element dat u wilt stylen.

Lineaire gradiënten

background: linear-gradient(135deg, #2563eb, #16a34a);

De hoek loopt met de klok mee vanaf de bovenkant: 0deg = boven, 90deg = rechts, 180deg = beneden, 270deg = links. U kunt ook benoemde richtingen handmatig schrijven: to right staat gelijk aan 90deg en to bottom left aan 135deg.

Radiale gradiënten

background: radial-gradient(circle, #2563eb, #16a34a);

De kleuren verspreiden zich vanuit het midden van het element naar buiten. Radiale gradiënten gebruiken geen hoek; voeg positie- of groottewoorden handmatig toe (at 30% 40%, ellipse) wanneer u meer controle nodig heeft.

Kleurstops

CSS-gradiënten accepteren meer dan twee kleuren en elke stop kan een positie hebben:

background: linear-gradient(to right, red 0%, red 50%, blue 50%, blue 100%);

Twee stops op dezelfde positie vormen een harde stop: de kleur verandert direct in plaats van te vervloeien. Handig voor gedeelde achtergronden.

Tips

  • Een gradiënt van rood naar blauw loopt in de standaard sRGB-interpolatie door een grijsachtig midden. Interpoleren in oklch houdt de mengkleur levendig: linear-gradient(in oklch, red, blue), ondersteund door moderne browsers.
  • transparent is niet kleurloos: in sRGB is het rgba(0,0,0,0), dus een vervaging naar transparent loopt door donkergrijs. Gebruik in plaats daarvan rgba(color, 0).
  • Gradiënten worden in moderne browsers op de GPU gerenderd en kosten dus vrijwel niets, ongeacht de grootte. Animaties tussen gradiënten worden niet ondersteund en springen abrupt; animeer in plaats daarvan de dekking van een extra laag.
  • Tekstvulling: combineer de declaratie met background-clip: text; color: transparent; om tekst met een gradiënt te vullen. Voor randen werkt border-image: linear-gradient(...) 1; in moderne browsers.

Veelgestelde vragen

Lineair voor gerichte overgangen, zoals een knop of een hero die van boven naar beneden of van hoek naar hoek loopt. Radiaal voor spotlight- en gloei-effecten, waarbij de kleuren zich vanuit een middelpunt naar buiten verspreiden.

De hoek bepaalt de richting van de overgang bij lineaire gradiënten: 0deg wijst omhoog, 90deg naar rechts en zo verder met de klok mee. Radiale gradiënten negeren de hoek.

De standaard sRGB-interpolatie middelt de kleurcomponenten, wat een gedesatureerd midden oplevert. Interpoleer in oklch (linear-gradient(in oklch, red, blue)) om de mengkleur in het midden levendig te houden.

CSS kan niet interpoleren tussen twee background-image-waarden, de wissel is abrupt. Veelgebruikte oplossingen: de dekking van een overliggende gradiënt animeren, of background-position verschuiven over een grotere vaste gradiënt.

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