Ejemplo para aplicar un gradiente de color de fondo en CSS

Los gradientes de color son una excelente manera de darle estilo y dinamismo a una página web. En lugar de un color sólido, un gradiente permite crear una transición suave entre dos o más colores, generando un efecto visual atractivo y moderno. Aquí aprenderemos a aplicar gradientes lineales y radiales en CSS.

¿Qué es un gradiente de color?

Un gradiente de color es una transición progresiva entre múltiples colores. CSS ofrece principalmente dos tipos de gradientes:

Gradiente lineal: los colores cambian a lo largo de una línea (horizontal, vertical o diagonal).
Gradiente radial: los colores cambian de manera concéntrica desde un punto hacia los bordes.

1. Gradiente Lineal en CSS

Para crear un gradiente lineal, usamos la propiedad background junto con la función linear-gradient. El formato básico de esta función es:

css
background: linear-gradient(ángulo, color1, color2, ...);

Ejemplo de gradiente lineal básico

En el siguiente ejemplo, crearemos un gradiente que va del azul al verde de forma vertical:

css
.fondo-gradiente-lineal {
    background: linear-gradient(to bottom, blue, green);
}

Personalización de Gradientes Lineales

CSS permite definir la dirección del gradiente de varias maneras:

to right o to left: Gradiente horizontal.
to bottom o to top: Gradiente vertical.
Ángulos en grados, como 45deg o 120deg, para controlar el ángulo exacto.

Ejemplo: Gradiente en Ángulo

Aquí aplicaremos un gradiente de 45 grados que vaya de morado a rosa:

css
.fondo-gradiente-angulo {
    background: linear-gradient(45deg, purple, pink);
}

Ejemplo: Gradiente con Múltiples Colores

Podemos agregar más de dos colores para crear efectos más complejos. En el siguiente ejemplo, usamos azul, verde y amarillo:

css
.fondo-gradiente-multiples {
    background: linear-gradient(to right, blue, green, yellow);
}

2. Gradiente Radial en CSS

Un gradiente radial crea una transición de color desde un centro hacia afuera. Su estructura básica es:

css
background: radial-gradient(círculo o elipse, color1, color2, ...);

Ejemplo de Gradiente Radial Básico

En este ejemplo, el gradiente radial comenzará desde el centro y se expandirá hacia los bordes:

css
.fondo-gradiente-radial {
    background: radial-gradient(circle, red, orange);
}

Personalización de Gradientes Radiales

Forma: Puedes usar circle (circular) o ellipse (elíptica).
Posición de inicio: Por defecto, el gradiente empieza desde el centro, pero puedes cambiarlo con palabras clave como at top o at bottom right.

Ejemplo: Gradiente Radial desde la Esquina

Aquí tenemos un gradiente radial que comienza en la esquina superior izquierda:

css
.fondo-gradiente-esquina {
    background: radial-gradient(circle at top left, pink, purple, black);
}

Ejemplo Completo: Aplicando Gradientes en HTML y CSS

Para ver cómo se aplican estos gradientes en una página web, utilizaremos HTML y CSS.

html
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gradientes en CSS</title>
    <style>
        .gradiente-lineal {
            width: 100%;
            height: 200px;
            background: linear-gradient(to right, teal, limegreen);
        }
        
        .gradiente-radial {
            width: 100%;
            height: 200px;
            background: radial-gradient(circle, skyblue, navy);
        }
    </style>
</head>
<body>

<h1>Ejemplo de Gradiente Lineal</h1>
<div class="gradiente-lineal"></div>

<h1>Ejemplo de Gradiente Radial</h1>
<div class="gradiente-radial"></div>

</body>
</html>

Resumen

Los gradientes de color en CSS son herramientas poderosas y versátiles para dar vida a los fondos de tus páginas. Con gradientes lineales y radiales, puedes experimentar y mejorar el diseño visual de cualquier elemento web. Estos ejemplos te ofrecen una base sólida para explorar más combinaciones y personalizar tus diseños.

Buscar este blog

Vía Electrónica