Crea impresionantes gradientes CSS lineales, radiales y cónicos con vista previa en tiempo real. Elige colores, ajusta paradas y copia el código CSS al instante.
Vista Previa en Vivo Exportar CSS con Un Clic Presets Curados 100% en el Navegador
Todo lo que necesitas para crear gradientes hermosos para tus proyectos web.
Vista Previa en Vivo
Ve tu gradiente actualizarse en tiempo real mientras ajustas colores, paradas y dirección.
Exportar CSS con Un Clic
Copia el código CSS de gradiente generado listo para pegar directamente en tu hoja de estilos.
Presets Curados
Elige entre 12 presets de gradiente seleccionados a mano para iniciar tu diseño.
100% en el Navegador
No se envía ningún dato a ningún servidor. Todo funciona localmente en tu navegador.
Casos de Uso de Gradientes
Los gradientes CSS están en todas partes del diseño web moderno.
Fondos Web
Crea fondos llamativos para secciones hero, páginas y divisores.
Superposiciones de Imagen
Capas de gradientes sobre fotos para legibilidad del texto o efectos artísticos.
Componentes UI
Aplica gradientes a botones, tarjetas y barras de progreso para mayor profundidad.
Texto con Gradiente
Combina con background-clip: text para crear tipografía degradada multicolor.
Preguntas Frecuentes
Encuentre respuestas a las preguntas más comunes.
Esta herramienta soporta los tres tipos de gradientes CSS: linear-gradient, radial-gradient y conic-gradient. También puedes activar la variante repetida para cualquier tipo.
Haz clic en 'Añadir Parada' para agregar una nueva parada de color. Puedes tener hasta 8 paradas, cada una con su propio selector de color, deslizador de posición y control de opacidad.
¡Sí! Haz clic en 'Copiar CSS' para copiar la regla CSS completa al portapapeles y pégala directamente en tu archivo CSS o estilo en línea.
Los gradientes lineales y radiales tienen soporte casi universal (99%+). Los gradientes cónicos son compatibles con todos los navegadores modernos incluyendo Chrome, Edge, Firefox y Safari.