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 insertar estilos css en html

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

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 cambiar color de texto html con css

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

Cómo crear un formulario de contacto con html

Imagen destacada del artículo Cómo crear un formulario de contacto con html

Cómo centrar un div con css

Imagen destacada del artículo Cómo centrar un div con css

Cómo centrar una tabla html con css

Imagen destacada del artículo Cómo centrar una tabla html con css

Cómo deshabilitar la selección de texto con css

Imagen destacada del artículo Cómo deshabilitar la selección de texto con css

Colores en html, códigos y nombres

Imagen destacada del artículo Colores en html, códigos y nombres