You can see this is very faint image (below), only one pixel tall. The demo can be 100 px tall.

enter image description here

How can I achieve this affect in Photoshop or Paint.net? I would like the main inner area to be 800px wide. Here is the Actual website where it is used in the background.

Edit: Alan, this is what I get after you advice. This is close but not really the same what I am looking for. I guess it needs some more CSS tricks.

enter image description here

  • As a more coding related tip I would actually have the middle part of the shadow same color as the shadow. That way if theres shifting of the background in say... Mobile Safari... you wouldn't have to worry about having 1px empty space on one edge of the site before the shadow actually starts. If you make the shadow this way you might want to use bg color in your wrap or something so that the big dark area of the shadow wont show up while images load, just the shadow parts. – Joonas Nov 1 '11 at 8:52

Photoshop has built-in tools to select 1 px tall or 1 px wide slices from an image. Look under the Marquee selection tool. Just build your gradient any way that's convenient, then use the 1 px selection tool to select a sliver, copy to a new document and Save for Web.

What you see in the example is shading applied over the background gradient. The fact that it's a png is a clue: png allows for transparency, and this is a semi-transparent grey applied to create a faux shadow.

  • Create a new layer above your background, then use a soft-edged large brush to make a black vertical stroke. Don't worry about the top and bottom being rounded; you're only going to use a sliver anyway.

  • Adjust the opacity of this layer until you see the shadow effect you're looking for.

  • Duplicate the layer and move the stroke until the two are the right distance apart. (Add a layer above that's the same size your container div will be so you can gauge the effect.)

  • When you have the shading the way you want it, merge the two stroke layers, make a 1px selection somewhere in the middle, copy to a new document and save for web as a png with transparency.

You should end up with something like this:

enter image description here

The body tag uses a gradient jpeg, similar to your example, and the container div has the 1px tall png with the "shadows", created as described. inside the container div is a content div (the grey box).

|improve this answer|||||
  • dont I have to use some type of blur rather than gradient? – Dave Nov 1 '11 at 0:43
  • Well, a blur IS a gradient, or a gradient is a blur. It just depends on how you look at it and how it was made. In this case it could be either, but I'd bet on a short gradient which was duplicated, reflected and moved into position opposite the original. The trick is to get the effect you want in a large form, then take a 1-pixel slice at a suitable point to use on your site. – Alan Gilbertson Nov 1 '11 at 7:20
  • I did that but it looks terrible. May be I did something wrong. – Dave Nov 1 '11 at 12:58
  • Okay, now I understand what you're asking. See updated answer. – Alan Gilbertson Nov 1 '11 at 21:12
  • See my new result. I guess it is more involved, will do some more research further. – Dave Nov 1 '11 at 22:59

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.