Cómo crear degradados CSS
Los degradados CSS permiten crear transiciones de color fluidas sin archivo de imagen. Son más ligeros que las imágenes, se adaptan perfectamente a cualquier tamaño de pantalla y son fáciles de personalizar.
Tipos de degradados CSS
Degradado lineal — los colores transitan en línea recta (arriba-abajo, izquierda-derecha o cualquier ángulo).
background: linear-gradient(135deg, #667eea, #764ba2);Degradado radial — los colores irradian desde un punto central según un patrón circular o elíptico.
background: radial-gradient(circle, #667eea, #764ba2);Degradado cónico — los colores giran alrededor de un punto central, como una rueda de color.
background: conic-gradient(from 0deg, #667eea, #764ba2, #667eea);Cómo crear degradados visualmente
- Selecciona el tipo de degradado — elige lineal o radial y ajusta el ángulo o la posición.
- Añade puntos de color — haz clic para añadir colores en distintas posiciones del degradado. Ajusta cada color y su posición.
- Copia el CSS — copia el código generado y pégalo en tu hoja de estilo.
Usar un generador visual es más rápido que escribir la sintaxis a mano, sobre todo con varios puntos de color.
Patrones de degradado habituales
Fondo de sección hero — un degradado sutil de dos colores añade profundidad sin distraer del texto.
background: linear-gradient(135deg, #0f172a, #1e3a5f);Resaltado de botón — un ligero degradado da un efecto tridimensional a los botones.
background: linear-gradient(180deg, #3b82f6, #2563eb);Velo sobre imagen — un velo en degradado mejora la legibilidad del texto sobre fotos.
background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.7));Borde de acento — usa un degradado como borde para crear interés visual.
border-image: linear-gradient(90deg, #667eea, #764ba2) 1;Consejos
- Sé sutil — los mejores degradados apenas se notan. Un suave deslizamiento entre dos colores similares añade profundidad. Los degradados arcoíris dramáticos rara vez resultan profesionales.
- Usa degradados en lugar de imágenes — un degradado CSS se carga al instante sin petición de red. Sustituye las imágenes de fondo decorativas por degradados cuando sea posible.
- Pruébalo en modo oscuro — los degradados que lucen bien sobre fondo claro pueden deslavarse o chocar en modo oscuro. Define degradados distintos para cada tema si hace falta.
- Atención al contraste del texto — si colocas texto sobre un degradado, comprueba que se mantenga legible en todo el rango del degradado, no solo sobre la parte más clara o más oscura.
Preguntas frecuentes
¿Los degradados CSS funcionan en todos los navegadores?
Sí. Los degradados lineales y radiales están admitidos en todos los navegadores modernos, incluidos Chrome, Firefox, Safari y Edge. Los degradados cónicos tienen soporte algo más reciente pero funcionan en todas las versiones actuales.
¿Puedo usar más de dos colores?
Sí. Los degradados CSS admiten tantos puntos de color como quieras. Cada punto define un color y una posición a lo largo del degradado.
¿Los degradados afectan al rendimiento?
No. Los degradados CSS los renderiza el navegador y son mucho más ligeros que los archivos de imagen. Se adaptan perfectamente a cualquier tamaño de pantalla sin descarga adicional.
¿Se puede animar un degradado?
No directamente con una transición CSS sobre la propiedad background, pero puedes animar background-position o usar propiedades personalizadas de CSS con @property para crear animaciones de degradado fluidas.