¿Qué tipos de gradiente se admiten?

Lineal (basado en dirección), radial (circular o elíptico) y cónico (barrido angular). Los tres son CSS3 estándar y están admitidos en todos los navegadores modernos.

¿Cómo añado más de dos colores?

Usa el botón "Añadir parada" para añadir paradas de color adicionales. Cada parada tiene un color y una posición entre 0 y 100 por ciento. Puedes tener hasta 8 paradas.

¿Qué navegadores admiten los gradientes cónicos?

Los gradientes cónicos están admitidos en Chrome 69+, Firefox 83+, Safari 12.1+ y Edge 79+. Para navegadores más antiguos, utiliza gradientes lineales o radiales.

¿Puedo guardar mi gradiente?

El generador produce una declaración CSS que puedes copiar en tu hoja de estilos. Actualmente, marcar la URL completa no conserva el estado.

Generador de Gradientes CSS

Crea gradientes CSS lineales, radiales y cónicos con vista previa en vivo

Tus datos nunca salen de tu dispositivo

Tipo de gradiente

Ángulo: 45°

Paradas de color (2/8)

Vista previa

Salida CSS

background: linear-gradient(45deg, #ff6e7f 0%, #bfe9ff 100%);

Preajustes

Preguntas Frecuentes

¿Qué tipos de gradiente se admiten?

Lineal (basado en dirección), radial (circular o elíptico) y cónico (barrido angular). Los tres son CSS3 estándar y están admitidos en todos los navegadores modernos.
¿Cómo añado más de dos colores?

Usa el botón "Añadir parada" para añadir paradas de color adicionales. Cada parada tiene un color y una posición entre 0 y 100 por ciento. Puedes tener hasta 8 paradas.
¿Qué navegadores admiten los gradientes cónicos?

Los gradientes cónicos están admitidos en Chrome 69+, Firefox 83+, Safari 12.1+ y Edge 79+. Para navegadores más antiguos, utiliza gradientes lineales o radiales.
¿Puedo guardar mi gradiente?

El generador produce una declaración CSS que puedes copiar en tu hoja de estilos. Actualmente, marcar la URL completa no conserva el estado.