Categoría: Desarrollo
Generador de degradados CSS
Crea un degradado lineal o radial y copia el CSS
Elige dos o tres colores, ajusta el ángulo, previsualiza el resultado en vivo y copia una declaración background-image lista para pegar. Todo se renderiza en tu navegador.
background-image: linear-gradient(135deg, #0f7b63 0%, #1f4f7a 100%);
Todo lo de esta página se procesa en tu navegador. No se sube nada.
Para qué sirve
Un degradado se juzga mejor a ojo que escribiéndolo a mano, así que esta herramienta pinta el CSS real en un panel de vista previa mientras lo ajustas. Elige un degradado lineal con su ángulo en grados o uno radial centrado, añade un color intermedio opcional para una mezcla de tres paradas y copia la declaración directamente a tu hoja de estilos.
Cómo se usa
- Elige un degradado lineal o radial.
- Escoge el color inicial y el final y, si quieres, uno intermedio.
- Ajusta el ángulo y copia la declaración CSS.
Privacidad
Esta herramienta funciona íntegramente en tu navegador. Lo que introduces nunca se sube, se guarda ni se comparte: al cerrar la pestaña desaparece.
Preguntas frecuentes
- ¿Se sube algo?
- No. La vista previa es un fondo CSS que pinta tu navegador y la declaración se construye en la página, así que no se envía nada a un servidor.
- ¿Necesito prefijos de proveedor?
- No para los navegadores actuales. linear-gradient y radial-gradient sin prefijo llevan años soportados.
- ¿Hacia dónde apunta el ángulo?
- En CSS, 0deg va de abajo arriba y el ángulo crece en sentido horario, así que 90deg va de izquierda a derecha y 180deg de arriba abajo.