Generador de Degradados CSS
Diseña gradientes lineales atractivos y copia al instante el código CSS para tus proyectos web.
CSS Output
background: linear-gradient(90deg, #4F46E5 0%, #EC4899 100%);Preview
¿Cómo funcionan los degradados en CSS?
Los degradados permiten transiciones fluidas entre dos o más colores. En CSS se tratan como valores de background-image y no colores planos, permitiendo superposiciones complejas y efectos modernos.
Degradados lineales (Linear Gradients)
La sintaxis estándar define un ángulo de inclinación o dirección seguido de los puntos de parada de color. Al manipular los controles de la herramienta superior, puedes observar la proyección de luz en tiempo real.
Base de Conocimiento & FAQ
Preguntas Frecuentes
Respuestas y soluciones directas a dudas comunes, desafíos técnicos y estándares del sector.
¿Por qué los degradados CSS a veces se ven grisáceos o 'apagados' en el centro?expand_more
Este efecto se conoce como la 'zona muerta gris'. Cuando CSS interpola dos colores saturados (como azul y amarillo) en el espacio sRGB estándar, el punto medio matemático cruza por zonas de baja saturación. Para solucionarlo:
- Añade un punto de color intermedio armónico (por ejemplo, verde entre azul y amarillo).
- O utiliza la especificación moderna CSS Color 4 en OKLCH:
background: linear-gradient(in oklch to right, blue, yellow);que preserva el brillo perceptual sin desaturar.
¿Cómo animar un degradado de fondo en CSS al hacer hover?expand_more
Los navegadores no pueden interpolar directamente la propiedad
background-image. Sin embargo, puedes lograr una animación fluida a 60fps ampliando el tamaño del fondo y animando background-position: .gradient-btn {
background: linear-gradient(135deg, #4F46E5, #EC4899);
background-size: 200% 200%;
transition: background-position 0.4s ease;
}
.gradient-btn:hover {
background-position: 100% 100%;
}¿Cuál es la diferencia entre linear-gradient y radial-gradient en CSS?expand_more
linear-gradient() distribuye la transición de color a lo largo de una línea recta definida por un ángulo (ej.
90deg, 135deg) o dirección cardinal (to bottom right). radial-gradient() se expande desde un punto central hacia afuera en círculos o elipses concéntricas, ideal para efectos de iluminación, focos y viñetas.¿Cómo crear un efecto de glassmorphism con degradados CSS?expand_more
El efecto glassmorphism combina capas degradadas semitransparentes en formato RGBA con desenfoque acelerado por GPU:
.glass-card {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05));
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 20px;
}¿Afectan los degradados CSS al rendimiento o batería en dispositivos móviles?expand_more
No. A diferencia de las imágenes de mapa de bits (PNG/WebP), los degradados CSS son fórmulas matemáticas vectoriales procesadas directamente por el chip gráfico (GPU). Consumen cero ancho de banda y memoria mínima.