Saltar al contenido

Generador de Degradados CSS

Crea degradados CSS lineales, radiales y cónicos con vista previa en tiempo real. Ajusta colores, ángulo y paradas. Código CSS listo para copiar. 100% en tu navegador.

Tipo de degradado
90°
Paradas de color
Código CSS
 

¿Qué son los degradados CSS?

Los degradados CSS permiten crear transiciones suaves entre dos o más colores sin necesidad de imágenes. Se definen con las funciones linear-gradient(), radial-gradient() y conic-gradient(), y se usan como valor de background o background-image.

Tipos de degradado

Lineal — transición en línea recta según un ángulo (p. ej. linear-gradient(90deg, #f00, #00f)). Radial — transición circular o elíptica desde un punto central. Cónico — transición angular alrededor de un punto central, ideal para gráficos de tipo pastel.

Paradas de color

Las paradas de color definen qué colores aparecen y en qué posición del degradado. Puedes añadir múltiples paradas y controlar su posición en porcentaje para crear transiciones suaves o cortes nítidos.

Privacidad

Todo el procesamiento se ejecuta 100% en tu navegador. No se envían datos a ningún servidor.