Generador de Gradientes CSS
Herramienta online gratuita para crear gradientes CSS. Genera gradientes lineales y radiales, personaliza colores, ángulos y posiciones. Obtén el código en formato CSS nativo, Tailwind CSS o variables CSS. Ideal para diseñadores y desarrolladores web.
Vista Previa
Presets Populares
Controles
linear-gradient(90deg, #6d28d9 0%, #4f46e5 100%)Características Principales
- Crea gradientes lineales y radiales con múltiples puntos de color
- Personaliza ángulos, posiciones y formas del gradiente
- Presets populares listos para usar
- Generador aleatorio de gradientes para inspiración
- Obtén el código en CSS nativo, Tailwind CSS o variables CSS
- Vista previa en tiempo real
¿Cómo Usar el Generador de Gradientes?
- Selecciona el tipo de gradiente (lineal o radial)
- Ajusta el ángulo o la posición según el tipo
- Añade, elimina o modifica los colores del gradiente
- Personaliza la posición de cada color
- Copia el código generado en el formato que necesites
Tipos de Gradientes CSS
Gradiente Lineal
Los gradientes lineales crean una transición suave entre dos o más colores en línea recta. Son ideales para fondos, botones y elementos que requieren una transición direccional de colores.
background: linear-gradient(45deg, #ff0000, #00ff00);Gradiente Radial
Los gradientes radiales crean una transición desde un punto central hacia afuera. Pueden ser circulares o elípticos, y son perfectos para efectos de iluminación o puntos focales en el diseño.
background: radial-gradient(circle, #ff0000, #00ff00);Compatibilidad con Navegadores
Los gradientes CSS son compatibles con todos los navegadores modernos. No requieren prefijos de proveedor y funcionan de manera consistente en diferentes plataformas.