Para crear una sombra flotante en CSS, utilizarás la propiedad `box-shadow`. Dependiendo del efecto de sombra que quieras, debería ajustar los valores.
Aquí hay un ejemplo simple de cómo hacer una sombra “flotante”:
```css
.div{
width: 100px;
height: 100px;
background-color: #5ED7C3;
box-shadow: 3px 3px 5px rgba(0,0,0,0.3);
}
```
En este ejemplo, `3px` es el desplazamiento horizontal de la sombra, `3px` es el desplazamiento vertical de la sombra, `5px` es el desenfoque de la sombra, y `rgba(0,0,0,0.3)` es el color de la sombra.
Para hacer un efecto “flotante” más pronunciado, puedes aumentar los valores de desplazamiento y desenfoque. Incluso puedes agregar una sombra difusa más grande detrás de una sombra sólida más pequeña:
```css
.div{
width: 100px;
height: 100px;
background-color: #5ED7C3;
box-shadow: 3px 3px 10px rgba(0,0,0,0.3),
10px 10px 20px rgba(0,0,0,0.4);
}
```
En este ejemplo, he añadido una segunda sombra `10px 10px 20px rgba(0,0,0,0.4)`. Esta sombra es más grande y más difusa, y se añade detrás de la sombra sólida más pequeña para crear un efecto de “flotación”.
Nota: La propiedad `box-shadow` puede tomar múltiples valores de sombras separados por comas, lo que te permite crear múltiples sombras de diferentes tamaños y desenfoques en un solo elemento.
