En este artículo, veremos cómo crear una sombra degradada usando CSS, además de conocer las diversas propiedades CSS aplicadas para obtener los efectos de sombra degradada.
La sombra degradada significa agregar el degradado con efecto de sombra al elemento. El gradiente puede ser lineal, radial o cilíndrico. Generalmente, la sombra degradada se puede implementar en las tarjetas, botones, banners, etc., para resaltarlo con un contorno de fondo falso, además de resaltar el contenido. La adición de la sombra de degradado se puede lograr utilizando pseudoclases de CSS y sombras de degradado lineal .
Sintaxis :
element::after {
/* desired styling properties */
}
Enfoque: estos son los pasos necesarios para obtener la sombra de degradado lineal deseada:
- Cree un archivo HTML, con el botón, la tarjeta, el banner o lo que quiera hacer sombra.
- Cree una pseudoclase en la hoja de estilo y haga que la posición de la pseudoclase sea absoluta en relación con el elemento principal.
- Agregue un pequeño recuadro , que es una abreviatura de arriba, derecha, abajo, izquierda, para que la sombra no quede oculta por el elemento principal.
- A la pseudo clase, agregue el degradado lineal del color deseado, con la dirección deseada a la propiedad de fondo.
- Agregue la propiedad de desenfoque del filtro a la pseudoclase para que se vea como una sombra del elemento principal; de lo contrario, se verá como un borde.
- Por último, agregue el índice z para ir más allá del elemento principal.
Ejemplo 1: este ejemplo describe la creación de una sombra de degradado lineal mediante CSS.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: auto;
}
.lgShadow {
background: rgb(74, 201, 0);
padding: 1rem;
top: 100px;
position: relative;
height: 100px;
width: 200px;
}
/* pseudo-class for making gradient shadow. */
.lgShadow::after {
content: "";
position: absolute;
inset: -.625em;
background: linear-gradient(to bottom right,
rgb(0, 255, 81), rgb(255, 213, 0));
filter: blur(2.5em);
z-index: -1;
}
</style>
</head>
<body>
<p class="lgShadow">
GeeksforGeeks is a portal for Geeks.
</p>
</body>
</html>
Producción:
Sombra de degradado lineal
Ejemplo 2: este ejemplo describe la sombra de degradado lineal en una forma circular usando CSS.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: auto;
}
.lgShadow {
background: rgb(201, 77, 0);
padding: 3rem;
top: 100px;
position: relative;
height: 100px;
width: 200px;
border-radius: 50%;
}
/* pseudo-class for making gradient shadow. */
.lgShadow::after {
content: "";
position: absolute;
inset: -.625em;
background: linear-gradient(to bottom right,
rgb(255, 0, 0), rgb(255, 213, 0));
filter: blur(2.5em);
border-radius: 50%;
z-index: -1;
}
</style>
</head>
<body>
<p class="lgShadow">
GeeksforGeeks is a portal for Geeks.
</p>
</body>
</html>
Producción:
Sombra circular de degradado lineal