Inset box-shadow beneath content

Question

You need to make a new element inside the div, with absolute positioning and height and width of 100%, then give that element the box shadow.

div {
    height: 300px;
    color: red;
    position: relative;
}

div > div {
    box-shadow: inset 0 0 10px black;
    position: absolute;
    pointer-events: none;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

<div>
    <div></div>
    Sample text
</div>

Alternatively, you can use a pseudo-element:

div {
    height: 300px;
    color: red;
    position: relative;
}

div:before {
    content: '';
    box-shadow: inset 0 0 10px black;
    position: absolute;
    pointer-events: none;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

<div>
    Sample text
</div>

Leave a Comment Cancel reply