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.

copiarhtml
<div class="gradient"></div>

copiarcss
.gradient {
  width: 100%;
  height: 100vh;
  background: linear-gradient(to left, #e01b5c, #394bad);
}

También puedes usarlo con radial-gradient.

copiarcss
.gradient {
  background: radial-gradient(#e01b5c, #394bad);
}

Botones degradados.

También podemos aplicar gradientes a botones para darle un aspecto mas llamativo.

copiarhtml
<button class="button">Button</button>

copiarcss
.button {
  padding: 0.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.

copiarhtml
<h1>Hola Mundo</h1>

copiarcss
h1 {
  position: relative;
  width: 80%;
  margin: 0 auto;
}

h1::after {
  content: "";
  position: absolute;
  margin-top: 0.5em;
  bottom: -0.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.