Generador de degradados CSS
Genera degradados lineales y radiales CSS con vista previa en vivo y copia el código CSS
Cómo usar
- Use los dos selectores de color de arriba para elegir los colores inicial y final
- Seleccione una dirección de degradado: lineal (6 direcciones) o radial
- Para degradados más ricos, haga clic en "Agregar parada de color" para insertar colores intermedios
- La vista previa en vivo muestra el efecto del degradado con el código CSS correspondiente abajo
- Haga clic en "Copiar CSS" para pegar el código directamente en su hoja de estilos
Preguntas frecuentes
¿Qué es un degradado CSS?
Un degradado CSS es una transición suave de colores utilizada como efecto de fondo. Los degradados lineales (linear-gradient) hacen la transición a lo largo de una línea recta, mientras que los degradados radiales (radial-gradient) se expanden hacia afuera desde un punto central. Todos los navegadores modernos soportan degradados CSS.
¿Cuál es la diferencia entre degradados lineales y radiales?
Los degradados lineales hacen la transición a lo largo de una línea recta (de izquierda a derecha, de arriba a abajo, en diagonal, etc.), mientras que los degradados radiales se expanden en un patrón circular desde un punto central. Cada uno tiene sus casos de uso en diseño — lineales para franjas y fondos, radiales para efectos de foco de luz.
¿Cómo uso el degradado CSS generado en mi sitio web?
Copie el código CSS generado y péguelo en su archivo CSS para la propiedad de fondo del elemento deseado. Por ejemplo: .my-element { background: linear-gradient(to right, #FF5733, #3B82F6); }. Los degradados funcionan en cualquier elemento que soporte la propiedad background.