CSS-gradientgenerator

Lag lineære, radiale og koniske gradienter med flyttbare fargestopp, blandemoduser og ferdig CSS.

Forvalg

Velg et polert utgangspunkt.

Lag

Stable gradienter for mer dybde.

Laginnstillinger

Juster geometri og blanding.

Gradienttype

Vinkel135°

Interpolasjon

Blandemodus

Fargestopp

Klikk for å legge til, dra for å flytte.

Stoppfarge

Posisjon

%

Stoppfarge

Posisjon

%

Stoppfarge

Posisjon

%

CSS-utdata

Kopier CSS som matcher forhåndsvisningen.

Fargeformat

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;

JSON-konfigurasjon

Eksporter eller lim inn konfigurasjon.

{
  "version": 1,
  "layers": [
    {
      "id": "layer-217",
      "type": "linear",
      "angle": 135,
      "centerX": 50,
      "centerY": 50,
      "radialShape": "circle",
      "radialSize": "farthest-corner",
      "colorSpace": "oklch",
      "blendMode": "normal",
      "stops": [
        {
          "id": "stop-218",
          "color": "#0B1020FF",
          "position": 0
        },
        {
          "id": "stop-219",
          "color": "#2563EBFF",
          "position": 42
        },
        {
          "id": "stop-220",
          "color": "#22D3EEFF",
          "position": 100
        }
      ]
    },
    {
      "id": "layer-221",
      "type": "radial",
      "angle": 0,
      "centerX": 22,
      "centerY": 18,
      "radialShape": "circle",
      "radialSize": "farthest-corner",
      "colorSpace": "oklch",
      "blendMode": "screen",
      "stops": [
        {
          "id": "stop-222",
          "color": "#A855F7CC",
          "position": 0
        },
        {
          "id": "stop-223",
          "color": "#A855F700",
          "position": 62
        },
        {
          "id": "stop-224",
          "color": "#00000000",
          "position": 100
        }
      ]
    }
  ]
}

Hva er en CSS-gradient?

Lag lineære, radiale og koniske gradienter med flyttbare fargestopp, blandemoduser og ferdig CSS.

En CSS-gradient er et bilde som nettleseren genererer fra en myk overgang mellom farger. Siden den beregnes ved rendering, skalerer den til alle størrelser uten pikselering og trenger ingen bildefiler.

Det finnes tre typer: lineær (retning eller vinkel), radial (sirkel eller ellipse fra et sentrum) og konisk (sveip rundt et sentrum). Hver gradient defineres av fargestopp; hvert stopp kan inneholde posisjon og alfa for å styre blandingen.

Flere gradienter kan stables ved å skille dem med komma i background-image og kombineres med background-blend-mode for rikere teksturer. CSS støtter også interpolasjon i fargerom som oklch for jevnere overganger.

Lineære gradienter er gode for lys og retningsbestemt dybde.
Radiale og koniske gradienter er nyttige for spotlys, ringer og fargehjul.
Juster stopp-posisjoner for skarpere eller mykere overganger.