¿Cómo usar degradados en css?
Utilizando solo css puedes lograr efectos visuales hermosos, los gradientes o degradados son uno de ellos. desde hace mucho tiempo ya son totalmente compatibles con los navegadores así que puedes usarlos sin ningún problema.
CSS soporta dos tipos de gradientes, linear-gradient y radial-gradient. A continuación algunos ejemplos:
Fondo o background degradado
primero definimos la etiqueta html. Para este caso usamos un div vacío.
<div class="gradient"></div>
.gradient{
width: 100%;
height: 100vh;
background: linear-gradient(to left,#e01b5c,#394bad);
}
También puedes usarlo con radial-gradient.
.gradient{
background: radial-gradient(#e01b5c,#394bad);
}
Botones degradados.
También podemos aplicar gradientes a botones para darle un aspecto mas llamativo.
<button class="button">
Button
</button>
.button{
padding: .5em 1em;
background: linear-gradient(to left,#e01b5c,#394bad);
border:none;
}
Borde degradado.
Para hacer este efecto en un borde debemos recurrir a unas propiedades especiales de css ya que los gradientes solo se aplican a la propiedad background. En primer lugar definamos una etiqueta h1 con cualquier texto.
<h1>Hola Mundo</h1>
h1{
position: relative;
width: 80%;
margin: 0 auto;
}
h1::after{
content:'';
position: absolute;
margin-top: .5em;
bottom: -.5em;
left:0;
width:100%;
height:2px;
background:linear-gradient(to left,#e01b5c,#394bad);
}
El atributo ::after agrega contenido extra a la etiqueta padre por eso el h1 tiene position relative, luego al elemento se le aplica position absolute y se establecen las propiedades bottom y left para posicionarlo con respecto a la etiqueta padre. debe tener un width y un height definidos de lo contrario no se vera nada.