Generador de Gradientes

Creá gradientes CSS lineales y radiales con vista previa.

Generador de Gradientes CSS Gratis

El Generador de Gradientes de Toolts crea gradientes CSS lineales y radiales con un editor visual. Elegí tus colores, elegí una dirección y copiá el código CSS listo para usar. El generador soporta gradientes de dos y tres colores con todas las direcciones CSS estándar.

Sintaxis de gradientes CSS

Los gradientes CSS usan la propiedad background con la función linear-gradient() o radial-gradient(). Un gradiente lineal requiere una dirección y dos o más puntos de color. La dirección se puede especificar con palabras clave (como "to right") o ángulos (como "135deg"). Los gradientes radiales crean transiciones circulares o elípticas desde un punto central hacia afuera.

Tips de diseño

Para diseño web moderno, los gradientes sutiles funcionan mejor que los dramáticos. Probá usar colores cercanos en la rueda de color para transiciones suaves. Los gradientes superpuestos en imágenes pueden agregar profundidad sin distraer. Los gradientes oscuros son excelentes fondos para secciones hero con texto blanco encima.

¡Copiado!