How do I add a "popup" shadow to an HTML element

Question

How can I give my a popup effect with a shadow? I see it commonly on different websites (e.g. https://www.smartrecruiters.com) At the edge of the content holder, it has this dark shadow popup effect.

Popup Effect

Is there a specific name for it? What can I do to create this effect on both side of the body?

Is element style alright or all styles are recommended to be in CSS?

Check out [this article on box-shadows](http://css-tricks.com/snippets/css/css-box-shadow/). — Hanna, Jul 03 '13 at 19:53
Hey RainbowHat! I'm going to send this over to SO for you, but I strongly suggest that you add more information to your question so that it has a better chance over there. I tried cleaning it up slightly for you. What do you mean by "_Is element style alright_"? Are you referring to inline styles? — JohnB, Jul 03 '13 at 19:55
Inline styles are the wrong thing in 99% of cases. Always use CSS, unless you can't. — Rich Bradshaw, Jul 03 '13 at 20:05
Not to be rude (please, don't take it that way), but Google would have literally answered your question and given you samples, even a "generator" that lets you play with the values and get exactly the effect you're after. Search terms like "HTML shadow", "shadow css", you would have to try pretty hard to NOT find a relevant and informative search result. We don't mind helping out, at all, but you should help yourself first! :D — Chris Baker, Jul 03 '13 at 20:05
possible duplicate of [Drop shadow on a div container?](http://stackoverflow.com/questions/860972/drop-shadow-on-a-div-container) — Chris Baker, Jul 03 '13 at 20:07
@Chris Sometimes it's really hard to find something that's extremely obvious if you don't know the right terminology. — Dom, Jul 03 '13 at 20:09
@Dominic I understand and appreciate that; that's why I tried to be gentle. BUT, in this case, he had all the right terms -- "shadow" and "css", or even "html" and "shadow". Research is an important skill for any developer to have, as is checking documentation resources. I hope to encourage RainbowHat to be more proactive in researching his issues before seeking help in the future. — Chris Baker, Jul 03 '13 at 20:31
@Chris I searched Google for those terms and guess what came up? This solution, which helped me solve my question. Get it? — Cyprus106, Dec 26 '13 at 01:48
@Cyprus106 First, you seem to be slightly hostile toward me -- quite misguided. There is an entire community process involved here. Second, I cannot duplicate that result. Any of those terms in Google produce results from MDN, css-tricks, or other tutorial-level sites. Documentation should trump Q&A. Finally, if this helped, good. That's why, even when a question is closed, edited, or moved (as this one was), the references are left in case they are helpful. The community process worked as it should, while trying to cut down on duplication. No need to be saucy. — Chris Baker, Dec 26 '13 at 03:38

score 4 · Answer 1 · answered Jul 03 '13 at 20:01

4

add this to your css

yourClass{box-shadow:2px 3px 5px #999;}

you can play around with values and color code to get your desired result

answered Jul 03 '13 at 20:01

Abdul Malik

2,632
1
18
31

score 1 · Accepted Answer · answered Jul 03 '13 at 20:05

Additionally, if you don't feel entirely confident tweaking the code, you can use one of various free box-shadow code generators, here's one I use:

http://css3gen.com/box-shadow/

Then copy and paste the code, with browser specific syntax as well. Probably a safer option if you don't know much about CSS.

score 1 · Answer 3 · answered Jun 02 '20 at 10:35

1

Shadow on whole page!!! My idea!

box-shadow: 0 0 0 100000px rgba(0,0,0,.2);

answered Jun 02 '20 at 10:35

Maxim Rysevets

71
3

score 0 · Answer 4 · answered Jul 05 '13 at 19:45

If your site is going to be commonly used on browsers like ie 8 or back, which are more common than you'd think, you should create an image background in photoshop, add a drop shaddow, and save it as a .png 24.

It depends on your demographic, and the element you're putting it on, but a lot of the time, a drop shaddow, or box shaddow as it's called in CSS, is easily created in photoshop, and covers you for older browsers where box shaddows may not be supported.

Milche Patern · Answer 5 · 2013-07-05T20:06:12.267

What you are looking for is a css level 3 property called box-shadow. Supported at about 83%.

Safari on iOS (including 6) can not apply box-shadow to input elements. (Solution: Add -webkit-appearance: none; to the input elements.)

Android 2.3 default browser doesn't seem to appreciate 0px values. e.g. -webkit-box-shadow: 5px 1px 0px #f04e29; doesn't work, but -webkit-box-shadow: 5px 1px 1px #f04e29 does!

This was the css from your example, wich you could have copy pasted.

.baseWrapper {
    /* not relevant, just copied */
    width:960px;min-height:200px;margin:-5px auto 0;border:0;background:#fff;
    -webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;
    /* Le box-shadow */
    -webkit-box-shadow:2px 2px 6px 1px #d2d2d2;
    -moz-box-shadow:2px 2px 6px 1px #d2d2d2;
    box-shadow:2px 2px 6px 1px #d2d2d2;
    /* some Microsoft filter could be missing here .. */
    }

If interested see http://tests.themasta.com/blogstuff/boxshadowdemo.html for various effects.

How do I add a "popup" shadow to an HTML element

5 Answers5