Generador de gradientes CSS
Diseña gradientes CSS con hasta 5 colores, control de ángulo y posición de cada stop. Elige entre gradiente lineal o radial. Preview en tiempo real y copia el código CSS listo para usar. Incluye 5 presets.
Colores (2/5)
CSS
background: linear-gradient(135deg, #E84827 0%, #FFB347 100%);Cómo se genera el código CSS
La función buildCSS(type, angle, stops) construye la cadena CSS directamente en el navegador. Para gradientes lineales genera linear-gradient(Ndeg, color1 pos1%, color2 pos2%, ...) con el ángulo que hayas seleccionado. Para radiales genera radial-gradient(circle, color1 pos1%, ...). Cada stop tiene un color hexadecimal y una posición porcentual ajustable con el slider. Los presets son objetos predefinidos con 2-3 stops que aplican configuraciones populares de color. Todo el procesamiento es en memoria — no hay petición al servidor ni canvas intermedio.
Gradientes en diseño web para LATAM
En el ecosistema de desarrollo web y diseño de América Latina, los gradientes CSS han reemplazado miles de imágenes de fondo en sitios de Shopify, tiendas WooCommerce y landing pages. Son fundamentales para crear diseños modernos sin coste de imágenes: una sección hero con linear-gradient(135deg, #FF6B6B 0%, #4ECDC4 100%) pesa 0 bytes en lugar de 300 KB. Agencias digitales en Bogotá, Ciudad de México y Buenos Aires los usan para mantener consistencia de marca en múltiples dispositivos, aprovechando que los gradientes CSS escalan perfectamente en pantallas retina sin pixelarse. El código generado es compatible con todos los frameworks CSS modernos, incluyendo Tailwind v4 con la clase bg-[...].
Otras herramientas
Preguntas frecuentes
- ¿Qué tipos de gradiente puedo crear?
- La herramienta soporta gradientes lineales (linear-gradient) y radiales (radial-gradient). Los lineales permiten controlar el ángulo de dirección; los radiales crean un efecto de círculo desde el centro.
- ¿Cómo añado más colores al gradiente?
- Pulsa el botón "Añadir color" para insertar hasta 5 puntos de color (stops). Cada stop tiene un selector de color y un slider para ajustar su posición porcentual en el gradiente (0% = inicio, 100% = final).
- ¿Cómo uso el código CSS generado?
- Copia el código con el botón "Copiar" y pégalo en tu hoja de estilos CSS. El código incluye la propiedad background completa. Por compatibilidad máxima, considera añadir también los prefijos -webkit- para navegadores antiguos.
- ¿Los gradientes funcionan en todos los navegadores?
- Sí. Los gradientes CSS lineales y radiales son compatibles con todos los navegadores modernos (Chrome, Firefox, Safari, Edge) sin necesidad de prefijos. Solo los navegadores muy antiguos (IE9 y anteriores) requieren una sintaxis diferente.
- ¿Puedo usar los presets como punto de partida?
- Sí. Los presets (Atardecer, Océano, Bosque, Morado, Noche) aplican colores y configuración predefinidos que puedes personalizar libremente. Son un punto de partida rápido, no una limitación.
- ¿Cuál es la diferencia entre un gradiente lineal y uno radial en diseño?
- Un gradiente lineal transita de un extremo al otro siguiendo una línea recta con el ángulo que definas (0° = abajo-arriba, 90° = izquierda-derecha, 45° = diagonal). Es ideal para fondos de secciones, botones y banners. Un gradiente radial se expande desde un punto central (circle) hacia los bordes, creando un efecto de "foco de luz". Es perfecto para ilustraciones, fondos de hero o efectos de iluminación. Ambos tipos soportan múltiples color stops para transiciones complejas.
- ¿Cómo uso gradientes CSS en proyectos de diseño web para clientes en LATAM?
- Los gradientes CSS son una alternativa sin peso de imagen para fondos atractivos: reemplazan imágenes de fondo de hasta 500 KB en sitios de landing pages, tiendas Shopify y temas de WordPress. En Colombia, México y Argentina, muchas agencias usan gradientes para crear identidades visuales modernas para sus clientes sin depender de recursos de diseño externos. Genera el gradiente aquí, copia el CSS y aplícalo directamente como background en Elementor, Divi o en el CSS personalizado de tu tema de Shopify. Para redes sociales, también puedes exportar el gradiente como imagen usando las herramientas de imagen de ToolsFoto.