The team behind OnlineTools4Free — building free, private browser tools.
Published Feb 4, 2026 · 6 min read · Reviewed by OnlineTools4Free
Guia de Degradados CSS: Tipos, Sintaxis y Tendencias
Los Tres Tipos de Degradados CSS
- linear-gradient: Transicion de colores a lo largo de una linea recta. El mas comun y versatil.
- radial-gradient: Transicion circular o eliptica desde un punto central. Perfecto para efectos de luz.
- conic-gradient: Transicion angular alrededor de un punto central. Util para graficos circulares e indicadores de progreso.
Cada tipo acepta la variante repeating- que repite el patron del degradado en toda la superficie.
Sintaxis del Degradado Lineal
background: linear-gradient(direccion, color1 posicion1, color2 posicion2);
- Direccion: Un angulo (
45deg,90deg) o palabra clave (to right,to bottom right). - Colores: Dos minimo, sin limite maximo. Cualquier formato CSS (hex, rgb, hsl).
- Posiciones: En porcentaje o pixeles. Opcionales pero utiles para controlar transiciones.
Tecnicas Avanzadas
- Degradados multiples: Superpone varios degradados con transparencias.
- Degradados en texto: Aplica un degradado al texto con
background-clip: text. - Bordes con degradado: Usa
border-imagecon un degradado. - Animacion: Los degradados CSS no se pueden animar directamente. Usa la tecnica de
background-sizedoble con desplazamiento debackground-position.
Tendencias de Diseno Actuales
- Degradados sutiles: Transiciones suaves entre tonos cercanos.
- Degradados mesh: Combinacion de multiples degradados radiales para fondos organicos.
- Degradados con ruido: Textura granulada via filtro SVG sobre un degradado.
- Degradados monocromaticos: Un solo tono con variaciones de luminosidad.
Rendimiento y Accesibilidad
- Los degradados complejos pueden causar banding en algunas pantallas. Agrega ruido ligero para atenuarlo.
- Verifica siempre el contraste del texto sobre fondos degradados.
- Prueba en diferentes pantallas: los degradados rinden diferente en pantallas de 6 y 8 bits.
Crea tus Degradados
Nuestro generador de degradados CSS te permite construir visualmente tus degradados y copiar el codigo CSS. Experimenta con colores, direcciones y tipos sin escribir codigo.
CSS Gradient Generator
Create beautiful CSS gradients with a visual editor. Linear, radial, and conic gradients.
OnlineTools4Free Team
The OnlineTools4Free Team
We are a small team of developers and designers building free, privacy-first browser tools. Every tool on this platform runs entirely in your browser — your files never leave your device.