Stax
Tools

Generador de Gradiente CSS

Construye gradientes CSS lineales y radiales visualmente y copia el CSS listo para usar.

0°90°180°270°360°
#6366f1
0%
#ec4899
100%
background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);

¿Qué es el generador de gradientes CSS?

Esta herramienta visual crea gradientes CSS lineales, radiales y cónicos. Con vista previa en vivo ajusta paradas de color, ángulos, posiciones. Para fondos, botones, secciones hero — obtén CSS listo para usar.

Cómo usar el generador

  1. Selecciona tipo de gradiente (Lineal/Radial/Cónico).
  2. Agrega colores y posiciones de parada.
  3. Ajusta ángulo/dirección.
  4. Ve la vista previa en vivo.
  5. Copia el CSS generado.

Tipos de gradientes

  • Lineal — transición en línea recta (arriba→abajo)
  • Radial — circular (centro → bordes)
  • Cónico — efecto gráfico de torta (rotación)
  • Múltiples paradas — mezclas multi-color complejas

Preguntas frecuentes

¿Diferencia entre gradiente lineal y radial?
El gradiente lineal hace transición de colores en línea recta (arriba→abajo, izq→der, etc.). El radial es circular (del centro hacia afuera). Lineal para fondos, botones. Radial para focos, efectos sunburst. Gradiente cónico para efectos de gráfico de torta.
¿Cuántos colores puede tener un gradiente?
Prácticamente ilimitados. Común: 2-3 colores. Cada color puede tener posición de stop (0%, 50%, 100%). Ejemplo: linear-gradient(to right, red 0%, yellow 50%, blue 100%). Para gradientes sutiles elige colores cercanos.
¿Cómo es el soporte del navegador?
Los navegadores modernos (Chrome, Firefox, Safari, Edge) todos soportan gradientes lineales, radiales, cónicos. Para IE antiguo se generan vendor prefixes (-webkit-, -moz-). Esta herramienta da sintaxis moderna limpia — perfecta para 99% de usuarios.
¿Cuál es el impacto en rendimiento?
Los gradientes CSS son más rápidos que imágenes (sin solicitud HTTP, sin tamaño de archivo). Se renderizan desde GPU — suaves. Mejor manera de reemplazar imágenes de fondo. Muchos gradientes en una página pueden afectar rendimiento — mide.

Herramientas relacionadas