La función linear-gradient() es una función incorporada en CSS que se utiliza para establecer el degradado lineal como imagen de fondo.
Sintaxis:
background-image: linear-gradient( direction, color1, color2, ... )
Parámetros: esta función acepta un parámetro de dirección y muchos parámetros de color que se enumeran a continuación:
- dirección: este parámetro se utiliza para definir el punto de partida y la dirección junto con el efecto de degradado.
- color1, color2, …: este parámetro se utiliza para mantener el valor del color seguido de su posición de parada opcional.
Los siguientes ejemplos ilustran la función linear-gradient() en CSS:
Ejemplo 1:
html
<!DOCTYPE html>
<html>
<head>
<title>linear-gradient function</title>
<style>
.gradient {
height: 100px;
background-image: linear-gradient(green, yellow, blue);
Text-align:center;
padding-top:40px;
font-size:40px;
color:white;
font-weight:bold;
}
h2 {
text-align:center;
}
</style>
</head>
<body>
<h2>linear-gradient: Top to Bottom property</h1>
<div class="gradient">GeeksforGeeks</div>
</body>
</html>
Producción:
Ejemplo 2:
html
<!DOCTYPE html>
<html>
<head>
<title>linear-gradient function</title>
<style>
.gradient {
height: 100px;
background-image: linear-gradient(to left, green, yellow, blue);
Text-align:center;
padding-top:40px;
font-size:40px;
color:white;
font-weight:bold;
}
h2 {
text-align:center;
}
</style>
</head>
<body>
<h2>linear-gradient: Right to Left property</h1>
<div class="gradient">GeeksforGeeks</div>
</body>
</html>
Producción:
Navegador compatible:
- Google cromo 26
- Borde 12
- explorador de Internet 10
- Firefox 16
- Ópera 12.1
- Safari 7