Cargando aplicación...
Preparando tu experiencia meskeIA
Crea degradados profesionales con editor visual
background: linear-gradient(135deg, #2E86AB 0%, #48A9A6 100%);Transición suave en línea recta. Perfecto para fondos, botones y headers
Se expande desde un punto central. Ideal para efectos de luz y profundidad
Rotación alrededor de un punto. Útil para gráficos circulares y efectos modernos
Todo lo que necesitas saber para crear gradientes profesionales
| Tipo de Gradiente | Sintaxis CSS | Dirección | Mejor uso | Compatibilidad |
|---|---|---|---|---|
| Linear | linear-gradient() | Línea recta | Fondos, botones, separadores | ✅ Todos los navegadores |
| Radial | radial-gradient() | Desde un punto central | Efectos de luz, spotlight | ✅ Todos los navegadores |
| Cónico | conic-gradient() | Alrededor de un punto | Gráficos circulares, ruedas de color | ✅ Chrome 69+, Firefox 83+ |
| Repetitivo linear | repeating-linear-gradient() | Líneas repetidas | Patrones, rayas, zebra | ✅ Todos los navegadores |
| Repetitivo radial | repeating-radial-gradient() | Anillos concéntricos | Efectos de onda, diana | ✅ Todos los navegadores |
Crea gradientes para fondos de hero sections, botones call-to-action y separadores de secciones que combinen con la paleta de marca.
Genera código CSS listo para copiar y pegar en proyectos React, Vue o Angular. Compatibilidad garantizada con navegadores modernos.
Experimenta con teoría del color y transiciones para entender cómo los gradientes afectan la percepción visual y la jerarquía de la información.
Diseña gradientes para banners de redes sociales, fondos de presentaciones y materiales de marca con aspecto profesional sin contratar diseñador.
linear-gradient() es una función de imagen CSS, por lo que se asigna a background-image o background. No se puede usar en background-color.rgba(255, 0, 0, 0.5) o la notación moderna #FF000080 (HEX con alpha). También puedes usar transparent para transición a transparente.in oklch.transition. La técnica más común es animar background-position en un gradiente de fondo más grande (background-size: 200%), o usar @keyframes con custom properties.linear-gradient(red 20%, blue 80%) indica que el rojo ocupa hasta el 20% y el azul comienza en el 80%, con transición entre ambos puntos.background: rgba(255,255,255,0.1) con backdrop-filter: blur(10px) y un borde semitransparente. El gradiente en este contexto se aplica al fondo del contenedor padre, no al elemento glass.background o background-image.Aplica el color dominante al 60%, el secundario al 30% y el de acento al 10%. Esta proporción crea gradientes equilibrados.
Los gradientes cálidos (naranja→amarillo) transmiten energía y urgencia. Los fríos (azul→violeta) comunican calma y profesionalidad.
Los ángulos 45°, 135° y 160° son los más usados en diseño profesional. Evita 0° y 90° exactos salvo en diseños muy geométricos.
Con repeating-linear-gradient puedes crear patrones de rayas sin imágenes. Ideal para texturas de fondo sutiles.
Los gradientes oscuros deben tener menos saturación que sus equivalentes en modo claro. Un azul vibrante en claro se convierte en un azul apagado en oscuro.
Define tus colores de gradiente como custom properties: --grad-start y --grad-end. Así puedes cambiar el tema sin reescribir todos los gradientes.
-webkit-. Verifica siempre en varios navegadores.background-color solo acepta colores sólidos. Los gradientes van en background o background-image.background-color sólido antes del gradiente como fallback para navegadores muy antiguos.