CODEWITHSUNDEEP
htmlcssshadowbox-shadow
ADH - THE TECHIE GUY
ADH - THE TECHIE GUY

Reputation: 4373

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?

Upvotes: 3

Views: 2153

Answers (5)

frnt
frnt

Reputation: 8795

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>

Upvotes: 8

JeetDaloneboy
JeetDaloneboy

Reputation: 407

you looking for something like this?

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

Upvotes: 2

Dsenese1
Dsenese1

Reputation: 1156

Use this box-shadow: 10px 10px 0px 0px red inset;

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

Upvotes: 3

Alireza Behnamnik
Alireza Behnamnik

Reputation: 336

Try this:

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

Upvotes: 1

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32182

used to this 

box-shadow:inset 5px 5px 1px red, inset 15px 15px 1px yellow;

inset as like this

.part-two{
                float: left;
                height:300px;
                width: 200px;
                background-color:green;
                box-shadow:inset 5px 5px 1px red, inset 15px 15px 1px yellow;
            }
<div id="part-two" class="part-two">
                </div>

Upvotes: 2

Related Questions