Herramientas
Generador de degradados
Diseña degradados lineales, de esquina y de malla y expórtalos como CSS o imagen.
Añade grano para reducir las bandas. Solo se aplica a la imagen exportada, no al CSS.
linear-gradient(90deg, #3b82f6 0%, #8b5cf6 100%)
Sobre esta herramienta
Este generador te ayuda a diseñar fondos degradados para webs, presentaciones, redes sociales o fondos de pantalla. Tiene tres modos: «Lineal», el clásico degradado con ángulo y paradas de color; «Esquinas», que mezcla cuatro colores desde los vértices; y «Malla», con 4 o 9 puntos de color que puedes mover libremente para lograr esos fondos suaves y orgánicos tan habituales en interfaces actuales.
Elige el modo en las pestañas de arriba. En «Lineal» añade paradas con «Añadir parada», cambia su color y posición, reordénalas arrastrando y ajusta el ángulo con el dial, el deslizador o los atajos de 45 en 45 grados; «Mezcla de pigmento» inserta colores intermedios calculados en OKLab. En «Esquinas» y «Malla» haz clic en los puntos de la vista previa para cambiar su color. El control «Ruido» añade grano para evitar bandas.
Todo se calcula en tu navegador con un lienzo (canvas): no se sube nada ni necesitas cuenta. Puedes exportar un PNG con el tamaño que quieras o con atajos como 1K, 4K, HD o formato de historia vertical, y copiar el CSS. Ten en cuenta que el ruido solo se aplica al PNG, y que los modos de esquinas y malla no tienen equivalente exacto en CSS: el código es una aproximación y la imagen es la versión fiel.
Preguntas frecuentes
¿Cómo pongo un degradado de fondo en CSS?
Copia el código con «Copiar CSS» y úsalo como valor de background o background-image, por ejemplo: background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 100%);. En el modo lineal el resultado es exacto.
¿Qué es un degradado de malla (mesh gradient)?
Es un degradado en el que el color no avanza en una sola dirección, sino que se mezcla a partir de varios puntos repartidos por la superficie. Da fondos suaves, tipo aurora, que CSS no puede reproducir con exactitud; por eso conviene exportarlo como PNG.
¿Por qué mi degradado se ve con bandas o escalones?
Pasa cuando dos colores cercanos se estiran sobre mucha superficie y la pantalla no tiene tonos intermedios suficientes. Sube un poco el «Ruido» antes de exportar el PNG: el grano disimula las bandas.
¿Qué hace la mezcla de pigmento?
Añade tres colores intermedios entre cada par de paradas, calculados en el espacio de color OKLab. Así se evita el tono grisáceo que a veces aparece en el centro de un degradado entre colores complementarios.