CSS-Gradientgenerator

Skapa linjära, radiella och koniska gradienter med dragbara färgstopp, blandningslägen och färdig CSS.

Förval

Välj en snygg startpunkt.

Lager

Stapla flera gradienter för djup.

Lagerinställningar

Justera geometri och blandning.

Gradienttyp

Vinkel135°

Interpolering

Blandningsläge

Färgstopp

Klicka för att lägga till, dra för att flytta.

Stoppfärg

Position

%

Stoppfärg

Position

%

Stoppfärg

Position

%

CSS-utdata

Kopiera CSS som matchar förhandsvisningen.

Färgformat

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;

Konfigurations-JSON

Exportera eller klistra in en konfiguration.

{
  "version": 1,
  "layers": [
    {
      "id": "layer-281",
      "type": "linear",
      "angle": 135,
      "centerX": 50,
      "centerY": 50,
      "radialShape": "circle",
      "radialSize": "farthest-corner",
      "colorSpace": "oklch",
      "blendMode": "normal",
      "stops": [
        {
          "id": "stop-282",
          "color": "#0B1020FF",
          "position": 0
        },
        {
          "id": "stop-283",
          "color": "#2563EBFF",
          "position": 42
        },
        {
          "id": "stop-284",
          "color": "#22D3EEFF",
          "position": 100
        }
      ]
    },
    {
      "id": "layer-285",
      "type": "radial",
      "angle": 0,
      "centerX": 22,
      "centerY": 18,
      "radialShape": "circle",
      "radialSize": "farthest-corner",
      "colorSpace": "oklch",
      "blendMode": "screen",
      "stops": [
        {
          "id": "stop-286",
          "color": "#A855F7CC",
          "position": 0
        },
        {
          "id": "stop-287",
          "color": "#A855F700",
          "position": 62
        },
        {
          "id": "stop-288",
          "color": "#00000000",
          "position": 100
        }
      ]
    }
  ]
}

Vad är en CSS-gradient?

Skapa linjära, radiella och koniska gradienter med dragbara färgstopp, blandningslägen och färdig CSS.

En CSS-gradient är en bild som webbläsaren skapar från en mjuk övergång mellan färger. Eftersom den beräknas vid rendering skalar den till alla storlekar utan att bli pixlig och kräver inga bildfiler.

Det finns tre typer: linjär (riktning eller vinkel), radiell (cirkel eller ellips från ett centrum) och konisk (svep runt ett centrum). Varje gradient definieras av färgstopp; varje stopp kan ange position och alfa för att styra blandningen.

Flera gradienter kan staplas genom att separera dem med kommatecken i background-image och kombineras med background-blend-mode för rikare texturer. CSS stödjer också interpolation i färgrymder som oklch för mjukare övergångar.

Linjär gradient är bra för ljus och riktad djupkänsla.
Radiella och koniska gradienter passar för spotlight, ringar och färghjul.
Justera stoppens positioner för skarpare eller mjukare övergångar.