Generador de Degradado CSS

Cómo usar el generador de degradado CSS

1. Elige el tipo Lineal o Radial.
2. Para degradados lineales, arrastra el control Dirección para ajustar el ángulo.
3. Elige colores para cada punto. Haz clic en + Añadir punto para agregar más. La vista previa y el CSS se actualizan al instante.
4. Haz clic en Copiar para copiar la propiedad CSS background lista para usar.

Sintaxis de degradados CSS

Degradados lineales: transición de colores a lo largo de una línea recta:

background: linear-gradient(90deg, #FF5733, #3498DB);

El ángulo puede ser en grados (0deg = abajo hacia arriba, 90deg = izquierda a derecha) o como palabra clave: to right, to bottom right.

Degradados radiales: transición hacia afuera desde un punto central:

background: radial-gradient(circle, #FF5733, #3498DB);

Puntos de color

Ambos tipos aceptan cualquier número de puntos de color con posiciones opcionales:

background: linear-gradient(to right, red 0%, yellow 50%, green 100%);

Usos de los degradados en CSS

• Fondo: background: linear-gradient(...);
• Texto degradado: combinar background-clip: text con -webkit-text-fill-color: transparent
• Efectos de desvanecimiento: usar degradado como mask-image para transiciones en bordes
• Borde degradado: border-image con degradado

Compatibilidad con navegadores

linear-gradient y radial-gradient tienen soporte completo en todos los navegadores modernos desde IE 10. No se necesita prefijo de proveedor.