CSS: Agregar fondo con gradiente background: linear-gradient(...)
📝 Uso
Esta plantilla muestra cómo usar la propiedad background: linear-gradient() en CSS para agregar un fondo con gradiente.
📘 Explicación
El código CSS anterior utiliza la propiedad background: linear-gradient() para crear un gradiente con dos colores. Puedes cambiar libremente la dirección y los colores del gradiente.
🔹 Código Parcial
Se ha aplicado un fondo con gradiente.
<div class="demo-area">
<p>Se ha aplicado un fondo con gradiente.</p>
</div>
<style>
.demo-area {
height: 200px;
text-align: center;
background: linear-gradient(to right, #ff7e5f, #feb47b);
color: white;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
}
</style>
💻 Código Funcional Completo
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>CSS: Agregar fondo con gradiente background: linear-gradient(...)</title>
<link rel="stylesheet" href="/assets/css/template-common.css?v=1">
<style>
.demo-area {
height: 200px;
text-align: center;
background: linear-gradient(to right, #ff7e5f, #feb47b);
color: white;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
}
</style>
</head>
<body>
<div class="demo-area">
<p>Se ha aplicado un fondo con gradiente.</p>
</div>
</body>
</html>
🌈 Técnicas prácticas para el diseño con degradados
Los fondos con linear-gradient() son una forma eficaz de añadir profundidad visual y dinamismo al diseño web moderno. Usados adecuadamente, pueden mejorar notablemente la apariencia general del sitio.
🎨 Coordinación de colores
Además del degradado básico en tonos naranjas (#ff7e5f a #feb47b), cambiar la dirección de to right a to bottom o 45deg genera una sensación totalmente diferente. Los colores análogos crean un ambiente tranquilo, mientras que los colores complementarios aportan un estilo más llamativo. Se recomienda usar herramientas como CSS Gradient Generator para encontrar el degradado ideal.
✨ Técnicas avanzadas de degradado
Los degradados con múltiples colores (linear-gradient(to right, red, yellow, green)) o con posiciones específicas (linear-gradient(to right, red 0%, yellow 50%, green 100%)) permiten expresiones visuales más complejas. Usar degradados transparentes como rgba(255,255,255,0) ayuda a crear superposiciones naturales sobre imágenes.
📱 Consejos para diseño responsivo
En dispositivos móviles, los degradados verticales (to bottom) suelen verse más naturales. Evita background-attachment: fixed para prevenir problemas de rendimiento al hacer scroll. Para modo oscuro, ajusta los colores con @media (prefers-color-scheme: dark).
Los degradados son una herramienta poderosa de diseño, pero un uso excesivo puede generar una apariencia recargada. Úsalos en secciones clave como encabezados para obtener un mayor impacto visual. Además, asegúrate de mantener un buen contraste para preservar la legibilidad del texto.