I'm working on a web site and want to create a bounding-shadow effect around the whole site, like in the image below. Can anyone point me in the right direction? I've tried inner-shadow but it doesn't quite do it, since the shadow in my example isn't consistent. Any ideas? Thanks for your help!

image with encroaching shadows at edges


Your question is a bit ambiguous, since it's not clear whether or not you want the uneven vignette effect in your example.

The example was created by adding a 50% Grey layer in Overlay mode above the image, then darkening it around the edges with either the Burn tool or a black brush set to a low opacity. It looks like there was some noise added to the layer too, before or after the burning step.

For an even effect, don't use Inner Shadow, which is directional. Instead, use Inner Glow. Change its blend mode to Overlay, color to black, and size and spread to taste.

  • Thank you!! Apologies for the ambiguity, I'm finding half my trouble is not knowing how to describe what I'm trying to do. I think I do want what you're calling an uneven 'vignette' effect (vignette! aha!). I will give your instructions a shot. – Michelle Oct 14 '11 at 20:49
  • You're welcome, Michelle. Vocabulary (terminology) is more than half the battle in learning any subject. If there's a word for something, it was important enough to have been given a name by professionals in the field. Learn what the words mean, therefore, and each one opens up another area of the subject that you can build on. – Alan Gilbertson Oct 16 '11 at 19:18

That would seem to be more of a vignette look than anything. When you say " the shadow in my example isn't consistent", do you mean you are looking for something less consistent around the edge?

You could try creating an outline around the border (select all -> stroke) and then adding or subtracting to the thickness at certain points. Then, when you apply your shadow it would be working off the stroke you created. You could even go back and, using the brush tool, add or subtract areas to get that uneven look.

  • Thanks! Sorry I didn't know to use the word 'vignette'. I'm not sure how to make the border uneven before doing the stroke, but someone else explained how to do it with overlay and burning so I'm going to try that. Sorry again for my poor graphic-designer vocabulary, I'm more of a developer. :) – Michelle Oct 14 '11 at 20:50

Boy you all complicate things. Grab an airbrush, increase the size significantly and paint OUTSIDE the area so the edges only hit using royal black. Adjust the opacity.


You can also use the rectangle too and draw a rectangle that covers your entire canvas. Make sure this is on the top layer. Then in your layers palette, make sure this layer is highlighted, then at the top of the layers palette, take the 'fill' down to 0. Then double click on the layer to get 'layer effects'. Then choose, 'inner glow'. Make sure the color is black and the blending mode is 'multiply'. Then you can adjust the effect from there. This allows you to add layers below the vignette while keeping that effect in place.


Your challenge is that a web site isn't a fixed canvas. So there's no defined 'frame' for what you want to do.

If you can confine the size of area you want to work in, that will help, so you'll have to figure out visually what to do beyond that with the background.

Since you can't layer the effect on top, as that would block click-ability of your site, you'll have to add the vignette as background images on your site. Alan's method is certainly viable--as using a layer mask in PhotoShop or the like.

  • If I make the background image/frame huge and shrink it to fit screen size I think I'll be okay - or I'll set a maximum width for the content, center it, and fade to black on either side. Not as worried about that as how to achieve the effect in the first place! Thanks for your advice. – Michelle Oct 15 '11 at 23:25

1) Go to Blending Options 2) Click On Graident Overlay 3) Style: Radial.

---------- Better Idea ----------

1) Blending Options 2) Inner Shadow


This may not be correct answer but it is a solution

Use the css box shadow http://css3generator.com/

-webkit-box-shadow: inset 0px 0px 20px 20px ;
-moz-box-shadow: inset 0px 0px 20px 20px ;
box-shadow: inset 0px 0px 20px 20px ; 
  • can we usee css box shadow in PHOTOSHOP??? – Jack Nov 23 '11 at 5:12
  • I dont think so, css is rendered in the web browser – pahnin Nov 23 '11 at 15:50
  • so if question it self says about photoshop how can be a css answer helpful?? – Jack Nov 24 '11 at 4:42
  • thats why I have quoted this may not be correct answer, yet If u are doing this graphic for web site you can use CSS :) – pahnin Nov 24 '11 at 14:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.