Generador de gradientes CSS
Privacidad por diseño — se ejecuta completamente en tu navegador
Construye gradientes CSS lineales y radiales visualmente, en tu navegador. Toova te permite ubicar paradas de color, ajustar ángulos, cambiar tipos y exportar CSS listo para pegar, todo sin subir nada a un servidor.
Gradientes lineales, radiales y cónicos
Los gradientes lineales se mueven a lo largo de un eje recto definido por un ángulo o palabra clave de dirección. Los gradientes radiales se expanden desde un punto central. Los gradientes cónicos barren alrededor de un ángulo: perfectos para fondos estilo gráfico de pastel o efectos de rueda de color. Toova expone los tres con controles visuales, para que puedas construir el gradiente que quieres sin memorizar cada variante de la sintaxis CSS.
Paradas de color y suavizado
Arrastra paradas de color a lo largo de la barra de gradiente para controlar dónde empieza y termina cada color. Agrega cuantas paradas necesites: Toova no las limita. Usa los preajustes de suavizado para introducir interpolación no lineal, lo que evita el medio gris turbio que plaga los gradientes simples de dos colores. La salida CSS usa propiedades estándar soportadas en cada navegador moderno.
Generación sólo en el navegador
Cada gradiente se genera localmente en tu navegador. Los colores que eliges, las paradas que ubicas, el CSS de salida: nada de eso sale de la página. Eso es excesivo para gradientes, pero significa que la herramienta es rápida y confiable, y la página funciona offline después de la primera carga. La pestaña Red permanecerá vacía durante el uso.
Preguntas frecuentes
- ¿Cuándo debo usar un gradiente cónico?
- Los gradientes cónicos son perfectos para efectos de gráfico de pastel, ruedas de color y fondos abstractos giratorios. Barren alrededor de un punto central, que es algo que ni los gradientes lineales ni los radiales pueden hacer. El soporte de navegador ahora es sólido en motores modernos.
- ¿Cómo evito el medio turbio en gradientes de dos colores?
- Agrega una parada intermedia con un color perceptualmente balanceado, o elige colores con luminosidad similar. Mezclar colores complementarios a través de su punto medio RGB produce gris: elegir el punto medio manualmente en OKLCH lo evita.
- ¿Puedo exportar a otros formatos?
- La salida es CSS estándar, que funciona directamente en cualquier contexto web. Para herramientas de diseño, copia paradas de color individuales y replica el gradiente en Figma o Sketch.
- ¿Soporta transparencia?
- Sí. Cualquier parada de color puede tener un canal alfa. Útil para desvanecer bordes hacia el fondo o estratificar gradientes con paradas semitransparentes.
- ¿Se envían mis datos a algún lado?
- No. La generación corre enteramente en tu navegador.