CSS div transparent background with shadow

March 23, 2023

I have this simple code, it makes the div to be transparent

<!DOCTYPE html>
<html>
  <body style="background-color: aqua">
    <div style="background-color: rgb(255,255,255,0); border: solid 3px #000; width: 50px; height: 50px; box-shadow: 5px 5px 0 rgb(0, 0, 255);">
      <div style="color: #fff; text-align: center; margin-top: 15px;">
        Hello
      </div>
    </div>    
  </body>
</html>

but what I need to achieve is to make the div transparent but the shadow to appear entire, that is to say this

Is there any way to achieve this only using a single div and not dying in the try?

>Solution :

You may use a pseudo element and offset it .

idea below

body {
background:aqua;
}

div {
box-sizing:border-box;
margin: 2em;
position:relative;
aspect-ratio:1/1;
height:100px;
display:grid;
align-items:center;
text-align:center;
background:rgb(0, 0, 255);
padding:5px  10px 10px 5px;/* tune it to your needs */
color:white;
}
div:before {
content:'';
position:absolute;
border:solid 6px black;
inset: -16px 10px 10px -16px;/* tune it to your needs */
}