Generador de Gradientes CSS

Crea gradientes lineales, radiales y cónicos con paradas de color arrastrables, modos de mezcla y CSS listo para usar.

Preajustes

Elige un punto de partida pulido.

Capas

Apila varios gradientes para dar profundidad.

Ajustes de capa

Ajusta la geometría y la mezcla.

Tipo de gradiente

Ángulo135°

Interpolación

Modo de mezcla

Paradas de color

Haz clic para añadir una parada. Arrastra para mover.

Color de parada

Posición

%

Color de parada

Posición

%

Color de parada

Posición

%

Salida CSS

Copia el CSS que coincide con la vista previa.

Formato de color

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 configuración

Exporta o pega una configuración de gradiente.

{
  "version": 1,
  "layers": [
    {
      "id": "layer-57",
      "type": "linear",
      "angle": 135,
      "centerX": 50,
      "centerY": 50,
      "radialShape": "circle",
      "radialSize": "farthest-corner",
      "colorSpace": "oklch",
      "blendMode": "normal",
      "stops": [
        {
          "id": "stop-58",
          "color": "#0B1020FF",
          "position": 0
        },
        {
          "id": "stop-59",
          "color": "#2563EBFF",
          "position": 42
        },
        {
          "id": "stop-60",
          "color": "#22D3EEFF",
          "position": 100
        }
      ]
    },
    {
      "id": "layer-61",
      "type": "radial",
      "angle": 0,
      "centerX": 22,
      "centerY": 18,
      "radialShape": "circle",
      "radialSize": "farthest-corner",
      "colorSpace": "oklch",
      "blendMode": "screen",
      "stops": [
        {
          "id": "stop-62",
          "color": "#A855F7CC",
          "position": 0
        },
        {
          "id": "stop-63",
          "color": "#A855F700",
          "position": 62
        },
        {
          "id": "stop-64",
          "color": "#00000000",
          "position": 100
        }
      ]
    }
  ]
}

¿Qué es un gradiente CSS?

Crea gradientes lineales, radiales y cónicos con paradas de color arrastrables, modos de mezcla y CSS listo para usar.

Un gradiente CSS es una imagen generada por el navegador a partir de una transición suave entre colores. Como se calcula en tiempo de renderizado, escala a cualquier tamaño sin pixelarse y no requiere archivos de imagen.

Hay tres tipos: lineal (dirección o ángulo), radial (círculo o elipse desde un centro) y cónico (barrido alrededor de un centro). Cada gradiente se define con paradas de color; cada parada puede incluir posición y alfa para controlar la mezcla.

Se pueden apilar varios gradientes separándolos con comas en background-image y combinarlos con background-blend-mode para crear texturas más ricas. CSS también permite interpolación en espacios de color como oklch para transiciones perceptualmente más suaves.

Los gradientes lineales son ideales para iluminación y profundidad direccional.
Los gradientes radiales y cónicos sirven para focos, anillos y ruedas de color.
Ajusta las posiciones de las paradas para transiciones más nítidas o más suaves.