¿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.