
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.
html<div class="gradient"></div>
css.gradient {width: 100%;height: 100vh;background: linear-gradient(to left, #e01b5c, #394bad);}
También puedes usarlo con radial-gradient.
css.gradient {background: radial-gradient(#e01b5c, #394bad);}
Botones degradados.
También podemos aplicar gradientes a botones para darle un aspecto mas llamativo.
html<button class="button">Button</button>
css.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.
html<h1>Hola Mundo</h1>
cssh1 {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.