Gerador de Gradientes CSS

Crie gradientes lineares, radiais e cônicos com paradas de cor arrastáveis, modos de mesclagem e CSS pronto para uso.

Predefinições

Escolha um ponto de partida refinado.

Camadas

Empilhe gradientes para dar profundidade.

Configurações da camada

Ajuste a geometria e a mesclagem.

Tipo de gradiente

Ângulo135°

Interpolação

Modo de mesclagem

Paradas de cor

Clique para adicionar uma parada. Arraste para mover.

Cor da parada

Posição

%

Cor da parada

Posição

%

Cor da parada

Posição

%

Saída CSS

Copie o CSS que corresponde à prévia.

Formato de cor

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 de configuração

Exporte ou cole uma configuração.

{
  "version": 1,
  "layers": [
    {
      "id": "layer-249",
      "type": "linear",
      "angle": 135,
      "centerX": 50,
      "centerY": 50,
      "radialShape": "circle",
      "radialSize": "farthest-corner",
      "colorSpace": "oklch",
      "blendMode": "normal",
      "stops": [
        {
          "id": "stop-250",
          "color": "#0B1020FF",
          "position": 0
        },
        {
          "id": "stop-251",
          "color": "#2563EBFF",
          "position": 42
        },
        {
          "id": "stop-252",
          "color": "#22D3EEFF",
          "position": 100
        }
      ]
    },
    {
      "id": "layer-253",
      "type": "radial",
      "angle": 0,
      "centerX": 22,
      "centerY": 18,
      "radialShape": "circle",
      "radialSize": "farthest-corner",
      "colorSpace": "oklch",
      "blendMode": "screen",
      "stops": [
        {
          "id": "stop-254",
          "color": "#A855F7CC",
          "position": 0
        },
        {
          "id": "stop-255",
          "color": "#A855F700",
          "position": 62
        },
        {
          "id": "stop-256",
          "color": "#00000000",
          "position": 100
        }
      ]
    }
  ]
}

O que é um gradiente CSS?

Crie gradientes lineares, radiais e cônicos com paradas de cor arrastáveis, modos de mesclagem e CSS pronto para uso.

Um gradiente CSS é uma imagem gerada pelo navegador a partir de uma transição suave entre cores. Como é calculado no momento do render, ele escala para qualquer tamanho sem pixelar e não precisa de arquivos de imagem.

Existem três tipos: linear (direção ou ângulo), radial (círculo ou elipse a partir de um centro) e cônico (varredura ao redor de um centro). Cada gradiente é definido por paradas de cor; cada parada pode incluir posição e alfa para controlar a mistura.

Vários gradientes podem ser empilhados separando-os por vírgulas em background-image e combinados com background-blend-mode para criar texturas mais ricas. O CSS também suporta interpolação em espaços de cor como oklch para transições mais suaves.

Gradientes lineares são ótimos para iluminação e profundidade direcional.
Gradientes radiais e cônicos são úteis para holofotes, anéis e rodas de cor.
Ajuste as posições das paradas para transições mais nítidas ou mais suaves.