dream hunter dream hunter - 2 months ago 18
CSS Question

is it possible to give the shadow inside the container?



.part-two{
float: left;
height:300px;
width: 200px;
background-color:green;
box-shadow: -10px -10px 1px red;
}

<div id="part-two" class="part-two">
</div>





in the above code i have given an outer shadow using box-shadow property,instead of that i want to give the shadow on inside of the container,is it possible to give inner shadow using box-shadow method?if yes,how?
else ,is there any methods exists to giver inner shadow using css?

Answer

Yes it is possible to add inner-shadow to an element, you just need to add inset along with your properties in box-shadow.

The presence of the inset keyword changes the shadow to one inside the frame (as if the content was depressed inside the box). Inset shadows are drawn inside the border (even transparent ones), above the background, but below content.

.part-two{
                float: left;
                height:300px;
                width: 200px;
                background-color:green;
                box-shadow: inset 0px 1px 10px 20px orange;
}
<div id="part-two" class="part-two">
</div>