Generador Gradiente CSS Gratis: Crear Degradados Lineales Radiales
36 usos135°
Consejos Gradientes CSS
Lineal y radial
Lineal: de un punto a otro en línea recta. Radial: desde un centro hacia afuera en círculo. Ajusta ángulo y dirección.
Colores personalizables
Elige los colores del gradiente y sus posiciones. Añade múltiples paradas de color.
Código CSS listo
background: linear-gradient() o radial-gradient(). Copia y pega directamente.
Preguntas frecuentes
¿Cómo crear un gradiente CSS?
Selecciona tipo (lineal/radial), elige colores, ajusta ángulo y copia el código CSS generado.
¿Qué tipos hay?
Lineal (dirección recta) y radial (desde centro). Ambos soportan múltiples colores.
¿Puedo usar más de dos colores?
Sí, añade paradas de color adicionales para gradientes más complejos.
¿Cuál es la diferencia entre degradados lineales y radiales generados aquí?
Los degradados lineales fluyen en línea recta, ya sea horizontal, vertical o diagonalmente. Controlas la dirección con el control deslizante de ángulo, como establecerlo en 90 grados para un desvanecimiento vertical. Los degradados radiales se expanden hacia afuera desde un punto central, creando un efecto circular u ovalado. No puedes controlar directamente la forma más allá de lo circular con esta herramienta, pero puedes elegir dónde está el centro.
¿El código de degradado funciona en todos los navegadores?
La herramienta genera CSS estándar que funciona en Chrome, Firefox, Safari y Edge. Internet Explorer 9 y anteriores no muestran degradados, pero eso es menos del 1% del tráfico global hoy. Para navegadores antiguos, añade un color de fondo sólido como fallback en tu CSS antes de la propiedad de degradado. Así los usuarios verán un color plano si no hay soporte para degradados. Prueba rápida: pega tu código en las herramientas de desarrollador de cualquier navegador moderno para verificarlo.
Cómo Usar
- Elige tipo: lineal o radial
- Selecciona colores
- Ajusta ángulo o dirección
- Previsualiza el gradiente
- Copia el código CSS