CSS-Gradientgenerator

Maak lineaire, radiale en conische gradients met versleepbare kleurstops, mengmodi en direct bruikbare CSS.

Presets

Kies een gepolijst startpunt.

Lagen

Stapel meerdere gradients voor diepte.

Laaginstellingen

Pas geometrie en blending aan.

Gradienttype

Hoek135°

Interpolatie

Mengmodus

Kleurstops

Klik om een stop toe te voegen, sleep om te verplaatsen.

Stopkleur

Positie

%

Stopkleur

Positie

%

Stopkleur

Positie

%

CSS-uitvoer

Kopieer CSS dat overeenkomt met de preview.

Kleurformaat

background-image: linear-gradient(135deg in oklch, #0B1020 0%, #2563EB 42%, #22D3EE 100%), radial-gradient(circle farthest-corner at 22% 18% in oklch, #A855F7CC 0%, #A855F700 62%, #00000000 100%);
background-blend-mode: normal, screen;

Configuratie-JSON

Exporteer of plak een configuratie.

{
  "version": 1,
  "layers": [
    {
      "id": "layer-201",
      "type": "linear",
      "angle": 135,
      "centerX": 50,
      "centerY": 50,
      "radialShape": "circle",
      "radialSize": "farthest-corner",
      "colorSpace": "oklch",
      "blendMode": "normal",
      "stops": [
        {
          "id": "stop-202",
          "color": "#0B1020FF",
          "position": 0
        },
        {
          "id": "stop-203",
          "color": "#2563EBFF",
          "position": 42
        },
        {
          "id": "stop-204",
          "color": "#22D3EEFF",
          "position": 100
        }
      ]
    },
    {
      "id": "layer-205",
      "type": "radial",
      "angle": 0,
      "centerX": 22,
      "centerY": 18,
      "radialShape": "circle",
      "radialSize": "farthest-corner",
      "colorSpace": "oklch",
      "blendMode": "screen",
      "stops": [
        {
          "id": "stop-206",
          "color": "#A855F7CC",
          "position": 0
        },
        {
          "id": "stop-207",
          "color": "#A855F700",
          "position": 62
        },
        {
          "id": "stop-208",
          "color": "#00000000",
          "position": 100
        }
      ]
    }
  ]
}

Wat is een CSS-gradient?

Maak lineaire, radiale en conische gradients met versleepbare kleurstops, mengmodi en direct bruikbare CSS.

Een CSS-gradient is een door de browser gegenereerde afbeelding van een vloeiende overgang tussen kleuren. Omdat het tijdens het renderen wordt berekend, schaalt het naar elke grootte zonder te pixeleren en zijn er geen afbeeldingsbestanden nodig.

Er zijn drie typen: lineair (richting of hoek), radiaal (cirkel of ellips vanuit een centrum) en conisch (een veeg rondom een centrum). Elke gradient wordt gedefinieerd door kleurstops; elke stop kan een positie en alfa bevatten om het mengen te sturen.

Meerdere gradients kun je stapelen door ze met komma’s te scheiden in background-image en combineren met background-blend-mode voor rijkere texturen. CSS ondersteunt ook interpolatie in kleurruimten zoals oklch voor vloeiendere overgangen.

Lineaire gradients zijn ideaal voor licht en directionele diepte.
Radiale en conische gradients zijn handig voor spotlights, ringen en kleurwielen.
Pas stop-posities aan voor scherpere of zachtere overgangen.