Generador de gradientes CSS
Diseña un gradiente visualmente — elige el tipo, el ángulo y las paradas de color, observa la vista previa en vivo y copia el CSS listo para usar.
Prueba después
Your files are processed locally in your browser. They are not uploaded to our servers.
Cómo se usa
- Elige el tipo de gradiente: lineal, radial o cónico.
- Ajusta el ángulo y añade o mueve paradas de color hasta que la vista previa quede bien.
- Copia el CSS generado en tu hoja de estilos.
¿Qué es esta herramienta?
El Generador de gradientes CSS construye el CSS de fondo para gradientes lineales, radiales y cónicos mientras los diseñas visualmente. Cada parada de color tiene su propio selector de color y control de posición, el ángulo es ajustable en los tipos lineal y cónico, y la vista previa se actualiza en vivo con cada cambio. El resultado es una declaración background limpia que puedes pegar en cualquier hoja de estilos. Todo se ejecuta en tu navegador.
Usos habituales
- Crear fondos para secciones hero y botones de un sitio web
- Reproducir en CSS un gradiente de un mockup de diseño
- Experimentar con gradientes cónicos para efectos tipo gráfico circular
- Generar fondos sutiles de dos tonos para tarjetas y banners
Preguntas frecuentes
¿Cuál es la diferencia entre gradientes lineales, radiales y cónicos?
Los lineales mezclan colores a lo largo de una línea recta, los radiales se expanden desde el centro hacia fuera, y los cónicos giran alrededor del centro como una rueda de color.
¿Cuántas paradas de color puedo añadir?
Entre dos y seis — suficiente para la mayoría de gradientes prácticos manteniendo el CSS legible.
¿Los gradientes generados funcionan en todos los navegadores?
Los lineales y radiales funcionan en cualquier navegador moderno. Los cónicos están soportados en todas las versiones actuales de Chrome, Firefox, Safari y Edge.
¿Puedo usar el CSS con Tailwind o styled-components?
Sí — la salida es una declaración background estándar; usa el valor en cualquier sistema de estilos que acepte CSS.