Generador de degradados CSS: crea degradados en tu navegador
Diseña un degradado de forma visual y copia el CSS con un clic.
Esta herramienta funciona por completo en tu navegador. Tus archivos nunca se suben: se quedan en tu dispositivo.
- 0%
- 100%
background: linear-gradient(90deg, #6d28d9 0%, #ec4899 100%);Escribir a mano la sintaxis de degradados es delicado: un porcentaje equivocado o una unidad olvidada y todo el fondo se viene abajo. Este generador te permite construir el degradado de forma visual: añade tantas paradas de color como quieras, arrastra sus posiciones, alterna entre lineal y radial, y observa cómo la vista previa se actualiza al instante.
Todo se ejecuta en tu navegador. No hay registro, ni ida y vuelta al servidor, ni nada que instalar: el CSS se genera en tu dispositivo en el momento en que cambias un ajuste, listo para copiar directamente a tu hoja de estilos.
Cómo usar Generador de degradados CSS
- Elige un tipo de degradado: lineal o radial.
- Para un degradado lineal, ajusta el ángulo en grados.
- Ajusta cada parada de color con el selector de color y su control deslizante de posición.
- Añade o quita paradas hasta que la vista previa luzca bien.
- Haz clic en «Copiar CSS» para copiar la regla de fondo generada.
Preguntas frecuentes
¿Qué CSS genera esto?
Genera una única propiedad background usando la función estándar linear-gradient() o radial-gradient(), de modo que puedes pegarla directamente en cualquier hoja de estilos o estilo en línea.
¿Cuántas paradas de color puedo añadir?
Tantas como necesites. Cada parada tiene su propio color y posición, y el degradado se actualiza en vivo a medida que las añades, editas o quitas.
¿El ángulo se aplica a los degradados radiales?
No. El ángulo solo afecta a los degradados lineales. Los degradados radiales se expanden hacia fuera desde el centro, por lo que el control de ángulo se oculta cuando se selecciona radial.
¿Se envía algo a un servidor?
No. La herramienta se ejecuta por completo en tu navegador. Tus colores y el CSS generado nunca salen de tu dispositivo.