Generatore di Gradienti CSS

Crea gradienti lineari, radiali e conici con punti colore trascinabili, modalità di fusione e CSS pronto all’uso.

Preset

Scegli un punto di partenza raffinato.

Livelli

Sovrapponi gradienti per profondità.

Impostazioni livello

Regola geometria e fusione.

Tipo di gradiente

Angolo135°

Interpolazione

Modalità di fusione

Punti colore

Clicca per aggiungere un punto. Trascina per spostare.

Colore del punto

Posizione

%

Colore del punto

Posizione

%

Colore del punto

Posizione

%

Output CSS

Copia il CSS che corrisponde all’anteprima.

Formato colore

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 di configurazione

Esporta o incolla una configurazione.

{
  "version": 1,
  "layers": [
    {
      "id": "layer-137",
      "type": "linear",
      "angle": 135,
      "centerX": 50,
      "centerY": 50,
      "radialShape": "circle",
      "radialSize": "farthest-corner",
      "colorSpace": "oklch",
      "blendMode": "normal",
      "stops": [
        {
          "id": "stop-138",
          "color": "#0B1020FF",
          "position": 0
        },
        {
          "id": "stop-139",
          "color": "#2563EBFF",
          "position": 42
        },
        {
          "id": "stop-140",
          "color": "#22D3EEFF",
          "position": 100
        }
      ]
    },
    {
      "id": "layer-141",
      "type": "radial",
      "angle": 0,
      "centerX": 22,
      "centerY": 18,
      "radialShape": "circle",
      "radialSize": "farthest-corner",
      "colorSpace": "oklch",
      "blendMode": "screen",
      "stops": [
        {
          "id": "stop-142",
          "color": "#A855F7CC",
          "position": 0
        },
        {
          "id": "stop-143",
          "color": "#A855F700",
          "position": 62
        },
        {
          "id": "stop-144",
          "color": "#00000000",
          "position": 100
        }
      ]
    }
  ]
}

Che cos’è un gradiente CSS?

Crea gradienti lineari, radiali e conici con punti colore trascinabili, modalità di fusione e CSS pronto all’uso.

Un gradiente CSS è un’immagine generata dal browser da una transizione morbida tra colori. Poiché viene calcolato al render, scala a qualsiasi dimensione senza pixelarsi e non richiede file immagine.

Esistono tre tipi: lineare (direzione o angolo), radiale (cerchio o ellisse da un centro) e conico (rotazione attorno a un centro). Ogni gradiente è definito da stop di colore; ogni stop può includere una posizione e l’alfa per controllare la miscelazione.

Più gradienti possono essere sovrapposti separandoli con virgole in background-image e combinati con background-blend-mode per ottenere texture più ricche. CSS supporta anche spazi colore di interpolazione come oklch per transizioni più uniformi.

I gradienti lineari sono ideali per luce e profondità direzionale.
I gradienti radiali e conici sono utili per riflettori, anelli e ruote dei colori.
Regola le posizioni degli stop per transizioni più nette o più morbide.