Gradient Generator
Create linear and radial CSS gradients
Generador de Gradientes CSS Online - Linear, Radial y Conic
¿Qué son los gradientes en CSS moderno y por qué usarlos?
Los gradientes CSS permiten crear transiciones suaves entre dos o más colores directamente con código, sin necesidad de imágenes. Esto reduce peticiones HTTP mejorando el rendimiento, son escalables a cualquier resolución sin pixelación, y son fácilmente modificables y animables. CSS moderno soporta tres tipos: linear-gradient (transición en línea recta con dirección personalizable), radial-gradient (transición desde un punto central hacia afuera en forma circular o elíptica), y conic-gradient (transición alrededor de un punto central, como un cono visto desde arriba). Esta herramienta genera código CSS compatible con todos los navegadores modernos sin necesidad de prefijos vendor.
¿Cómo se construye la sintaxis de un gradiente CSS?
Un gradiente lineal se define con: dirección (ángulo como 90deg o keywords como "to right", "to bottom left"), lista de colores, y opcionalmente color-stops para controlar la posición exacta de cada color. Ejemplo: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%). Para gradientes radiales, defines forma (circle o ellipse), tamaño (closest-side, farthest-corner, etc.), posición del centro, y colores. Los gradientes cónicos especifican el ángulo de inicio y posición del centro. Puedes combinar múltiples gradientes con background para crear efectos complejos de capas.
¿Cuáles son los usos creativos de gradientes CSS en diseño web?
Los gradientes CSS tienen aplicaciones variadas en diseño moderno: fondos de hero sections y landing pages para impacto visual, overlays semitransparentes sobre imágenes para mejorar legibilidad de texto, botones con efecto degradado para mayor profundidad visual, bordes con gradiente usando border-image o elementos pseudo, texto con gradiente usando background-clip: text combinado con -webkit-text-fill-color, sombras suaves no rectangulares, loading bars y progress indicators, y efectos de glassmorphism. Son esenciales para crear profundidad y dimensión sin recursos externos.
Preguntas frecuentes
¿Puedo animar gradientes CSS con transiciones?
No directamente: CSS no puede interpolar entre valores de gradiente con transition. Pero hay técnicas alternativas: anima background-position o background-size para crear efectos de movimiento manteniendo el gradiente estático, usa pseudo-elementos ::before/::after con gradientes diferentes y anima opacity para fade entre ellos, o aplica CSS Houdini @property para registrar propiedades de color como animables. Para animaciones fluidas de colores complejas, considera usar JavaScript para modificar las custom properties de los colores del gradiente.
¿Cómo creo un gradiente con transparencia (fade a transparent)?
Usa colores con canal alpha para transparencia. Sintaxis moderna: rgba(102, 126, 234, 0.5) o color-mix(), notación RGB con slash: rgb(102 126 234 / 50%), o keywords como transparent. Ejemplo de overlay que va de negro semitransparente a transparente: linear-gradient(to bottom, rgba(0,0,0,0.7), transparent). Esto es ideal para overlays sobre imágenes que mejoran la legibilidad del texto superpuesto.
¿Cuál es la diferencia entre linear-gradient y repeating-linear-gradient?
linear-gradient crea una única transición de colores que cubre todo el elemento. repeating-linear-gradient repite el patrón de colores indefinidamente, creando rayas o patrones. Los color-stops definen el tamaño del patrón que se repite. Ejemplo de rayas: repeating-linear-gradient(45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px). Es perfecto para crear fondos texturizados, indicadores de progreso estilizados, o efectos decorativos sin imágenes.