Shadow inside of a div

Question

Is it possible to display a shadow inside a div box without using pictures? Instead I want to use css commands.

So is there some command like: -webkit-box-shadow: 1px inset; ?

They actually use image in the tumblr website, two images to be precise. One shadow image for full page width and second broader shadow image in the center of the page. — Joonas, Mar 12 '12 at 10:51

score 39 · Answer 1 · answered Mar 12 '12 at 10:40

39

Yup there is a command inset. like this:

-webkit-box-shadow: 0 0 1px 3px #000 inset;
-moz-box-shadow: 0 0 1px 3px #000 inset;
box-shadow: 0 0 1px 3px #000 inset;

You can generate from here http://css3generator.com/

answered Mar 12 '12 at 10:40

sandeep

91,313
23
137
155

1

StackOverflow code highlighting seems to think `inset` is part of a comment `#000 inset` **.....** – Kaspar Lee Feb 26 '16 at 10:18

score 21 · Accepted Answer · edited Jan 12 '21 at 10:25

21

In CSS3 there's box-shadow which can also be inset to do exactly what you need. This is supported by the following browsers:

Chrome >= 10.0 (>= 4.0 with -webkit prefix)
Firefox >= 4.0 (>= 3.5 with -moz prefix)
IE >= 9.0
Opera >= 10.5
Safari >= 5.1 (>= 5.0 with -webkit prefix)

edited Jan 12 '21 at 10:25

Jam Roll

13
3

answered Mar 12 '12 at 10:39

oezi

51,017
10
98
115

1

-webkit-box-shadow: inset 0 2em 3em -1em green; solved it. Thanks :) – Tim Daubenschütz Mar 12 '12 at 10:42
you're welcome. please keep in mind to accept the answer that solved your problem by clicking on the tick-mark to the left of it. – oezi Mar 12 '12 at 10:44

score 0 · Answer 3 · answered Mar 19 '15 at 06:03

You can use Box shadow generator for shadow effects. I will give an example to show how to use the box shadow generator.

Step 1: Go to : Box Shadow Generator

Step 2: adjust the shadow property you want to add.

Step 3: Then copy the css code using "copy text" button.

step 4: Then you can past the css code into the style sheet file.

Do like this.

<html>
<head>
    <title>Title</title>
    <style type="text/css">
    #banner{

        position: absolute;
        width: 100%;
        height: 150px;
        background-color: #4E6C88;
        -webkit-box-shadow: -1px 9px 18px 0px rgba(0,0,0,0.75);
        -moz-box-shadow: -1px 9px 18px 0px rgba(0,0,0,0.75);
        box-shadow: -1px 9px 18px 0px rgba(0,0,0,0.75);
    }

    </style>
</head>
<body>
 <div id="banner">    

 </div>
</body>
</html>

Thank you... ;)

Shadow inside of a div

3 Answers3

Linked

Related