Imagen destacada del artículo Cómo usar degradados en css

Cómo usar degradados en css

css svg
actualizado: 24 / 06 / 2020

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

Artículos relacionados:
Cómo crear un menú desplegable con html y css

Imagen destacada del artículo Cómo crear un menú desplegable con html y css

Cómo poner una imagen de fondo en html con css

Imagen destacada del artículo Cómo poner una imagen de fondo en html con css

Cómo justificar el texto html con css

Imagen destacada del artículo Cómo justificar el texto html con css

Cómo cambiar color del texto en html con css

Imagen destacada del artículo Cómo cambiar color del texto en html con css

Cómo poner color de fondo en html con css

Imagen destacada del artículo Cómo poner color de fondo en html con css

Cómo insertar estilos css en html

Imagen destacada del artículo Cómo insertar estilos css en html

CSS text-align propiedad para alinear el texto de una etiqueta html

Imagen destacada del artículo CSS text-align propiedad para alinear el texto de una etiqueta html

Editar y personalizar el cursor con css

Imagen destacada del artículo Editar y personalizar el cursor con css