Generador de Gradientes CSS
Crea gradientes CSS hermosos de forma visual. Genera código listo para usar en CSS y Tailwind.
Configuración
Personaliza tu gradiente
Vista Previa y Código
Tu gradiente generado
¿Cómo usar el generador?
- Selecciona el tipo de gradiente (lineal o radial)
- Elige la dirección si es lineal (arriba, abajo, izquierda, derecha, diagonales)
- Selecciona los colores usando los selectores o escribe el código HEX
- Ajusta los colores hasta lograr el efecto deseado
- Usa los presets para inspiración rápida
- Genera colores aleatorios si necesitas ideas
- Copia el código CSS o Tailwind generado con un clic
Tipos de Gradiente
Lineal
Los colores fluyen en línea recta en la dirección especificada.
Direcciones: Arriba, Abajo, Izquierda, Derecha, y 4 diagonales.
Radial
Los colores irradian desde el centro hacia afuera en forma circular.
Efecto: Ideal para fondos con punto focal central.
Características
- Gradientes lineales y radiales
- 8 direcciones para gradientes lineales
- Selector de color visual con HEX
- 6 presets predefinidos inspiradores
- Generador de colores aleatorios
- Código CSS listo para copiar
- Código Tailwind CSS compatible
- Vista previa en tiempo real
- Copia con un solo clic
- Interfaz intuitiva y responsive
Casos de uso
- Fondos de sitios web y aplicaciones
- Botones y elementos de UI modernos
- Banners y headers llamativos
- Tarjetas y componentes destacados
- Overlays para imágenes
- Fondos de secciones hero
- Elementos de diseño gráfico
- Temas personalizados para aplicaciones
Presets Incluidos
Sunset
Naranja a rosa, perfecto para headers cálidos
Ocean
Azul a cyan, ideal para temas frescos
Forest
Verde a esmeralda, natural y relajante
Purple Dream
Púrpura a rosa, moderno y vibrante
Fire
Rojo a naranja, energético y llamativo
Night
Azul oscuro a negro, elegante y profesional
Consejos de Diseño
- Usa gradientes sutiles para fondos profesionales
- Los gradientes diagonales son más dinámicos que los verticales
- Combina colores análogos para armonía visual
- Los gradientes radiales funcionan bien como overlays
- Evita más de 3 colores para mantener simplicidad
- Prueba diferentes direcciones para encontrar la mejor
- Los gradientes oscuros son ideales para texto claro
- Usa el generador aleatorio para inspiración rápida
Formatos de Código
CSS Estándar
Código CSS puro compatible con todos los navegadores modernos.
background: linear-gradient(to right, #667eea, #764ba2);Tailwind CSS
Clases de Tailwind listas para usar en tus componentes.
bg-gradient-to-r from-purple-500 to-purple-700