El degradado en CSS es un tipo especial de imagen que se compone de una transición progresiva y suave entre dos o más colores. El gradiente se puede formar de 3 maneras:
- Degradado lineal : es una función incorporada en CSS que se utiliza para establecer el degradado lineal como imagen de fondo.
- Gradiente radial : es una función incorporada en CSS que se utiliza para establecer un degradado radial como imagen de fondo.
- Gradiente cónico: es una función incorporada en CSS que se utiliza para establecer un gradiente cónico como imagen de fondo.
Los degradados generalmente fusionan dos o más colores entre sí, aunque, en CSS, puede controlar esos cambios. Por ejemplo, puede cambiar la dirección, el ángulo, la posición, la intensidad de desvanecimiento, etc. Como los degradados son simplemente una imagen de fondo, también
Gradiente de CSS
podemos establecer la imagen de fondo como un degradado lineal o un degradado radial, y finalmente pasarlo a los colores iniciales o finales.
Hay una transición progresiva entre los colores de una imagen a lo largo de una línea recta en el caso de la función de gradiente lineal, mientras que la transición progresiva entre los colores de una imagen a lo largo de un radio (irradia desde un origen) en el caso de la función de gradiente radial. El ángulo de gradiente cónico comienza desde 0 grados hasta 360 grados. Las cónicas son circulares y utilizan el centro del elemento como punto de origen para la parada de color. En este artículo, aprenderemos todos estos tipos de gradientes en CSS y también entenderemos su implementación a través de los ejemplos.
Paradas de color: las paradas de color informan a los navegadores qué color usar, en el punto de inicio del degradado y dónde detenerse. De forma predeterminada, están espaciados por igual, pero podemos anularlo proporcionando las paradas de color específicas.
Hay varias formas de crear un degradado, algunas de ellas se detallan a continuación:
- Ángulo: puede especificar una propiedad CSS de degradado usando ángulos. Aquí 0 grados representa la dirección hacia arriba, los valores positivos representan la rotación en el sentido de las agujas del reloj. A medida que aumentamos el valor de un grado en una dirección positiva, digamos que se mueve de 0 a 90 grados, el color deja de moverse hacia arriba hacia la derecha y, por lo tanto, 90 grados representaría la dirección correcta.
linear-gradient(30deg, red, blue);
- Lado o Esquina: Consta de dos palabras hasta y hasta (dos palabras clave). Uno especifica el lado horizontal, es decir, izquierdo o derecho, y el otro especifica el lado vertical, es decir, arriba y abajo. Si no se especifica, toma ‘to bottom’ de forma predeterminada.
linear-gradient(to right, red, green);
- Porcentaje: también puede especificar la propiedad de degradado en el valor porcentual. Son sugerencias de color (también llamadas sugerencias de interpolación de color), que especifican cómo deben interpolarse las dos paradas de color de cada lado en el espacio entre ellas.
linear-gradient ( to top, red 10%, purple 45%);
Discutamos y entendamos todas las categorías del gradiente secuencialmente.
Degradado lineal: incluye las transiciones de color suaves para subir, bajar, izquierda, derecha y en diagonal. El mínimo de dos colores requerido para crear un degradado lineal. Pueden ser posibles más de elementos de dos colores en degradados lineales. El punto de partida y la dirección son necesarios para el efecto degradado. La dirección predeterminada es de arriba a abajo.
Sintaxis:
background-image: linear-gradient(
direction, color-stop1, color-stop2, ...);
Ejemplo 1: Este ejemplo ilustra el uso de la función linear-gradient() para usarla en diferentes ángulos.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
line-height: 5rem;
font-size: 20px;
text-align: center;
height: 100px;
background-color: red;
background-image:
linear-gradient(0deg, green, white);
}
#grad2 {
line-height: 5rem;
font-size: 20px;
height: 100px;
background-color: red;
background-image:
linear-gradient(90deg, pink, blue);
}
</style>
</head>
<body>
<h1>Linear Gradients - Using Different Angles</h1>
<div id="grad1" style="text-align: center">
0deg
</div>
<br />
<div id="grad2" style="text-align: center">
90deg
</div>
<br />
</body>
</html>
Producción:
Ejemplo 2: Este ejemplo ilustra el uso de la función linear-gradient() mediante el uso de degradado lineal multicolor de derecha a izquierda.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
#grad {
width: 100%;
height: 200px;
text-align: center;
font-size: 50px;
color: white;
line-height: 170px;
font-weight: bold;
background-image: linear-gradient(
to right, orange, #ec38bc,
#7303c0, cyan);
}
</style>
</head>
<body>
<div id="grad">
geeksforgeeks
</div>
</body>
</html>
Producción:
Gradiente lineal de derecha a izquierda
Ejemplo 3: Este ejemplo ilustra el uso de la función linear-gradient() usando un degradado transparente usando la función rgba().
HTML
<!DOCTYPE html>
<html>
<head>
<style>
#grad {
width: 100%;
height: 200px;
text-align: center;
font-size: 50px;
color: black;
line-height: 170px;
font-weight: bold;
background-image: linear-gradient(to right,
rgba(255, 0, 0, 0),
rgba(206, 16, 225, 0.58));
}
</style>
</head>
<body>
<div id="grad">GeeksforGeeks</div>
</body>
</html>
Producción:
gradiente de transparencia utilizando la función rgba().
El degradado del texto: Para agregar un degradado al texto, usamos la propiedad background-clip. Para esto, primero, escriba su texto seleccionado y luego aplique un degradado en su fondo. La propiedad Background-clip elimina el fondo excepto la región detrás del texto. Luego, hacemos que el color del texto sea transparente para que el degradado se pueda ver claramente sobre el texto.
Ejemplo 4: Este ejemplo ilustra el uso de la propiedad Background-clip para eliminar el fondo excepto la región detrás del texto.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: #f2f2f2;
}
#grad {
height: 200px;
width: 100%;
text-align: center;
font-size: 50px;
line-height: 170px;
font-weight: bold;
background-image: linear-gradient(to right,
#307e2b,
#20e3b2,
#29ffc6);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
</style>
</head>
<body>
<div id="grad">GeeksforGeeks</div>
</body>
</html>
Producción:
Degradado en texto
Gradientes radiales: es una función incorporada en CSS que se utiliza para establecer un degradado radial como imagen de fondo. Comienza en un solo punto y emana hacia afuera. De forma predeterminada, el primer color comienza en la posición central del elemento y luego se desvanece hasta el color final hacia el borde del elemento. El desvanecimiento ocurre a la misma velocidad hasta que se especifica. Se puede usar para hacer círculos concéntricos que comienzan desde un solo punto (centro) y se extienden hacia afuera.
Sintaxis:
background-image: radial-gradient(
shape size at position, start-color, ..., last-color);
Ejemplo: Este ejemplo ilustra el uso de la función radial-gradient() .
HTML
<!DOCTYPE html>
<html>
<head>
<style>
#grad {
height: 200px;
width: 100%;
text-align: center;
font-size: 50px;
color: black;
line-height: 170px;
font-weight: bold;
background-image: radial-gradient(
circle at top left,
#fdbb2d,
#22c1c3);
}
</style>
</head>
<body>
<div id="grad">GeeksforGeeks</div>
</body>
</html>
Producción:
Gradiente radial
Gradiente cónica: Es que
Sintaxis:
Background image: conic-gradient(color degree, color degree, ...);
Ejemplo: Este ejemplo ilustra el uso de la función conic-gradient() .
HTML
<!DOCTYPE html>
<html>
<head>
<title>conic gradient</title>
<style>
.box {
background-color: yellow;
height: 200px;
width: 200px;
float: left;
margin: 20px;
border-radius: 50%;
}
.c {
background-image: conic-gradient(
red, yellow, green, red);
}
.a {
background-image: conic-gradient(
red, yellow, green);
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>Conic-gradient</h3>
<div class="box c"></div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por prachbansal360 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA