🌈 Generador de Gradientes CSS
Crea gradientes CSS lineales o radiales preciosos en segundos: elige colores, ajusta el ángulo o la forma, añade tantos paradas de color como necesites y copia el código CSS terminado con un clic. Totalmente gratuito y funciona íntegramente en tu navegador.
Acerca de
Esta herramienta te permite construir visualmente gradientes CSS sin escribir ni una sola línea de código. Elige entre linear-gradient y radial-gradient, ajusta el ángulo o la forma, gestiona los paradas de color con un selector de color y un deslizador de posición, y previsualiza el resultado en tiempo real. Ocho preajustes integrados (Sunset, Ocean, Aurora, Neon y más) te dan ventaja desde el principio. Como todas las operaciones se ejecutan localmente en tu navegador con JavaScript puro, ningún dato de color ni información de diseño abandona tu dispositivo: no hay servidor, no hay cuenta y no hay ningún tipo de seguimiento.
Cómo usar
- Elige un tipo de gradiente — Lineal o Radial — en el menú desplegable Gradient type.
- Para gradientes lineales, establece el ángulo (0–360°) con el deslizador o el campo numérico. Para gradientes radiales, elige Ellipse o Circle como forma.
- Haz clic en una muestra de color del panel Color Stops para abrir el selector de color, luego arrastra el campo de posición para colocar cada parada exactamente donde la necesitas.
- Haz clic en + Add Stop para insertar un nuevo parada de color ubicado automáticamente en el mayor espacio libre, o haz clic en el botón ✕ para eliminar cualquier parada (se requieren mínimo 2).
- Haz clic en Copy CSS para copiar la declaración background: linear-gradient(…) o radial-gradient(…) terminada al portapapeles y pégala directamente en tu hoja de estilos.
Preguntas frecuentes
- ¿El Generador de Gradientes CSS es gratuito?
- Sí, completamente gratuito: sin suscripción, sin cuenta y sin límites de uso ocultos. Abre la página y empieza a crear gradientes de inmediato.
- ¿Esta herramienta funciona sin conexión a internet?
- Sí. Una vez cargada la página, la herramienta funciona completamente sin conexión: sin llamadas a API externas, sin dependencias de CDN ni solicitudes al servidor. Es segura para usar en un avión o en entornos con red restringida.
- ¿Mis datos de color o diseño se envían a un servidor?
- No. La generación de gradientes y el renderizado de la vista previa ocurren localmente en tu navegador con JavaScript. Tus elecciones de color se guardan solo en el localStorage de tu navegador y nunca se transmiten a ningún sitio.
- ¿Cuál es la diferencia entre linear-gradient y radial-gradient?
- Un linear-gradient hace la transición de colores a lo largo de una línea recta en un ángulo dado (p. ej. 135deg). Un radial-gradient irradia colores hacia afuera desde un punto central en forma de elipse o círculo. Ambos generan CSS estándar compatible con todos los navegadores modernos.
- ¿Cuántas paradas de color puedo añadir?
- No hay un límite integrado: puedes añadir tantos paradas de color como necesites (mínimo 2). Las nuevas paradas se colocan automáticamente en el mayor espacio del gradiente y el color interpolado en esa posición se rellena previamente para un punto de partida suave.