# Generador de degradados CSS: escríbelos a mano o con herramientas

[Canonical HTML page](https://gradiently.design/es/guide/css-gradient-generator)

Casi todo el código de degradados generado se puede pegar y está algo anticuado. Aprende las cuatro partes de un degradado y lo escribirás antes de encontrar un generador, y lo ajustarás como ningún deslizador permite.

## The short version

- Un generador de degradados CSS convierte tus elecciones de color y ángulo en un valor de background-image que puedes pegar en una hoja de estilos.
- Todo degradado CSS tiene cuatro partes: un tipo, una dirección o posición, un espacio de color de interpolación opcional y una lista de paradas de color.
- Los generadores antiguos siguen sacando prefijos de navegador y filtros heredados de Internet Explorer, que los navegadores modernos no necesitan.
- Añadir una tercera parada de color, un espacio de interpolación como oklch o una segunda capa suele mejorar el código generado más que cambiar los colores.
- Guardar un degradado terminado en una propiedad personalizada lo hace reutilizable en toda la web y fácil de cambiar en un solo sitio.

Un **generador de degradados CSS** te da un valor de degradado para pegar, como `linear-gradient(135deg, #1e1b4b 0%, #6d28d9 100%)`, después de elegir los colores y un ángulo. Es un buen punto de partida. Pero un degradado CSS es lo bastante corto como para escribirlo a mano en menos de un minuto, y es en el código escrito a mano donde están las mejoras: una tercera parada, un espacio de color mejor, una segunda capa. Esta página muestra cómo leer lo que sale de un generador, limpiarlo y escribir el tuyo.

## Las cuatro partes de todo degradado CSS

```css
.hero {
  background-image: linear-gradient(
    160deg            /* 1. direction: an angle or "to right" */
    in oklch,         /* 2. optional: the colour space to blend in */
    #1e1b4b 0%,       /* 3. colour stops: colour and position */
    #6d28d9 55%,
    #f472b6 100%
  );
}

/* 4. the type: linear, radial or conic */
.glow { background-image: radial-gradient(circle at 80% 20%, #f472b6, #1e1b4b 70%); }
.dial { background-image: conic-gradient(from 90deg, #6d28d9, #f472b6, #6d28d9); }
```

Todo lo que controlan los deslizadores de un generador corresponde a una de estas cuatro partes.

| Parte | Opciones | Valor por defecto si se omite |
| --- | --- | --- |
| Tipo | `linear`, `radial`, `conic`, más sus versiones `repeating` | Ninguno, tienes que elegir |
| Dirección o posición | `160deg`, `to top right`, `circle at 80% 20%`, `from 90deg` | De arriba abajo; elipse centrada; desde 0deg |
| Espacio de color | `in oklab`, `in oklch`, `in srgb` y otros | sRGB para colores hex |
| Paradas | Cualquier color, con posiciones opcionales en porcentaje o longitud | Repartidas por igual del 0% al 100% |

Los valores por defecto explican por qué tantos degradados generados se parecen: dos paradas, repartidas por igual, mezcladas en sRGB.

Cada tipo tiene su propia guía: [degradados lineales](https://gradiently.design/es/guide/css-linear-gradient), [degradados radiales](https://gradiently.design/es/guide/css-radial-gradient) y [degradados cónicos](https://gradiently.design/es/guide/css-conic-gradient).

## Recetas de degradados para copiar

Están escritas a mano y no generadas, y cada una usa una idea que un generador básico rara vez te da: una luz descentrada, tres paradas en lugar de dos o un espacio de color elegido. Haz clic en cualquiera para copiarla.

- Anochecer, tres paradas: `linear-gradient(160deg, #1e1b4b 0%, #6d28d9 50%, #f472b6 100%)`
- Vidrio marino: `linear-gradient(135deg, #ecfeff 0%, #99f6e4 50%, #2dd4bf 100%)`
- Brasa en la esquina: `radial-gradient(circle at 85% 15%, #fb923c 0%, #9a3412 35%, #1c0a05 75%)`
- Papel suave: `linear-gradient(180deg, #fdf6ec 0%, #f5e6d3 100%)`
- Verde boreal: `radial-gradient(ellipse at 30% 70%, #34d399 0%, #0f766e 40%, #042f2e 80%)`
- De violeta a naranja pasando por rosa: `linear-gradient(90deg in oklch, #7c3aed, #f97316)`

El último tiene solo dos paradas, pero mezclar en oklch lleva el tono por un rosa vivo, donde sRGB da un malva más apagado. Los navegadores sin soporte de espacios de color se quedan sin degradado, así que declara antes un degradado normal.

## Cómo limpiar el código de un generador

Pega desde un generador antiguo y puede que obtengas cinco líneas donde basta una. Los degradados con prefijo y el filtro de Internet Explorer llevan años sin hacer falta; añaden peso y, en el caso de la antigua sintaxis `-webkit-`, usan otro sistema de ángulos que confunde a quien edite después.

### Código antiguo típico

- `background: #1e1b4b;` y luego tres copias con prefijo
- `-webkit-linear-gradient(left, ...)` con las reglas de ángulo antiguas
- `filter: progid:DXImageTransform...` para Internet Explorer
- `rgba(30, 27, 75, 1)` para colores totalmente opacos

### Código moderno y limpio

- Un único `background-color` sólido como alternativa
- Un solo `linear-gradient()` sin prefijo
- Ningún filtro
- Hex corto, o `rgb(30 27 75 / 0.5)` solo donde importa el alfa

```css
.hero {
  background-color: #1e1b4b; /* shows while loading and if the gradient fails */
  background-image: linear-gradient(160deg, #1e1b4b 0%, #6d28d9 55%, #f472b6 100%);
}
```

Todo lo que intentaba decir el código de un generador antiguo, en dos líneas.

Tu navegador también es un generador bastante decente. Abre las herramientas para desarrolladores, selecciona el elemento y haz clic en cualquier muestra de color dentro del degradado en el panel Styles: obtienes un selector de color para esa parada, y puedes editar ángulos y porcentajes en el sitio mientras la página se actualiza en vivo. Copia el valor terminado de vuelta a tu hoja de estilos. Para ajustar un degradado frente a contenido real, eso supera a cualquier herramienta independiente, porque lo ves detrás de tu titular de verdad.

## Cinco ajustes que superan a cualquier deslizador

1. **Añade una parada intermedia** Dos paradas dan una rampa recta. Un tercer color en torno al 50 o 60 por ciento añade profundidad y te deja controlar dónde ocurre el cambio.
2. **Elige el espacio de color** Añade `in oklab` para que las mezclas entre colores lejanos queden limpias, o `in oklch` para que el tono viaje. [Interpolación de degradados](https://gradiently.design/es/guide/gradient-interpolation) muestra la diferencia.
3. **Descentra la luz** Cambia un degradado lineal por `radial-gradient(circle at 80% 20%, ...)` para que el color más luminoso venga de una esquina, como una fuente de luz.
4. **Superpón dos o tres degradados** Separa varios valores con comas en `background-image`. Unos brillos radiales sobre una base lineal se ven mucho más ricos que un solo degradado; [degradados de malla en CSS](https://gradiently.design/es/guide/css-mesh-gradient) lleva esto más lejos.
5. **Añade un poco de grano** Una capa de ruido tenue oculta el bandeado en degradados grandes y oscuros. El código está en [textura de ruido en CSS](https://gradiently.design/es/guide/css-noise-texture).

```css
.hero {
  background-color: #0f0b1e;
  background-image:
    radial-gradient(circle at 80% 15%, #f472b6 0%, transparent 40%),
    radial-gradient(circle at 15% 85%, #4338ca 0%, transparent 45%),
    linear-gradient(160deg, #0f0b1e 0%, #1e1640 100%);
}
```

Tres capas escritas a mano: una luz rosa arriba a la derecha, un charco índigo abajo a la izquierda y una base oscura. La primera capa de la lista queda encima.

## Convertir un degradado en un token reutilizable

Cuando un degradado esté bien, ponle nombre. Una propiedad personalizada guarda el valor completo, así que los botones, los banners y la cabecera pueden compartirlo, y un rediseño toca una sola línea. [Variables CSS para temas](https://gradiently.design/es/guide/css-custom-properties-theming) muestra cómo cambiar los tokens de degradado por marca o por modo.

```css
:root {
  --gradient-brand: linear-gradient(160deg, #1e1b4b 0%, #6d28d9 55%, #f472b6 100%);
}

.hero { background-image: var(--gradient-brand); }
.badge { background-image: var(--gradient-brand); }
```

Una definición, usada en todas partes. Si cambian los colores, no hay que tocar nada más en la hoja de estilos.

## Cuándo un generador no es la herramienta adecuada

Los generadores y el CSS escrito a mano comparten el mismo límite: el resultado es una lista de paradas que cualquiera puede leer en tu hoja de estilos y reutilizar. Para detalles de interfaz está bien. Para el fondo por el que te reconoce la gente, en tu web y en cada post, quizá quieras algo más rico y más difícil de copiar. El consejo más general está en [cómo usar un generador de degradados](https://gradiently.design/es/guide/gradient-generator).

Los Marks de Gradiently van más allá de lo que CSS puede describir: materiales superpuestos, luz, grano y movimiento, renderizados en vivo en cada tamaño, con un único propietario a la vez. Puedes diseñar gratis con cualquier Mark que no esté reservado y buscar en el Mercado con palabras de color para encontrar uno parecido al degradado que intentabas escribir.

## FAQ

### ¿Qué es un generador de degradados CSS?

Una herramienta que te permite elegir colores, ángulo y tipo de forma visual y después devuelve un valor `linear-gradient()`, `radial-gradient()` o `conic-gradient()` para pegar en CSS.

### ¿Sigo necesitando prefijos -webkit- para los degradados CSS?

No. Los degradados sin prefijo funcionan en todos los navegadores actuales. Quita las copias con prefijo y los antiguos filtros de Internet Explorer del código generado.

### ¿Cómo escribo un degradado CSS a mano?

Elige un tipo, una dirección y dos o más paradas de color: `linear-gradient(160deg, #1e1b4b, #6d28d9 55%, #f472b6)`.

### ¿Por qué mi degradado generado se ve turbio en el centro?

Mezcla en sRGB, que agrisa los colores lejanos. Añade `in oklab` después del ángulo, o añade una parada intermedia con un color más limpio.

### ¿Cómo reutilizo un degradado en toda una web?

Guarda el degradado completo en una propiedad personalizada como `--gradient-brand` y usa `var(--gradient-brand)` donde lo necesites.