I've been trying to find a way to replicate these shadows under content that makes it look like the element is arched up.

Two examples are here at the W3C's new design (upper left hand corner the shadow under the blue box):


and here (same effect under the list):


Does anyone know if there is a term for this type of shadowing or any kind of tutorial to achieve it in photoshop or whatnot?


  • This seems like a simple radial gradient to me. Have you tried to do it yourself in Photoshop or Illustrator? Abinadi Ayerdis over 9 years ago

4 answers


You can achieve that in any number of ways.

One of the more powerful ways are to use layer effects, something like this:

  1. Create a new vector layer with the Rectangle tool (U)
  2. Set it's Fill to 0 (below Opacity) in the layer palette
  3. Double click on the new layer to access it's effects
  4. On the first screen, remember to tick the "Layer Mask Hides Effects" box
  5. Add a outer glow: Color: black; Mode: Multiply: Size/Radius/Spread: Your choice :)
  6. Confirm the layer effect and add a layer mark to the new layer through the button in the layer palette
  7. Use Gradient Fill tool (ie Reflected Gradient) or a large soft brush to paint black and white to fade the graphic and crop it where needed

Ask away if something doesn't go as planned :)

Answered over 9 years ago by Jens Hedqvist
Dave 5

Try using circular shapes that have layer effects like Jens described above for the shadow. Then use another layer with a rectangular shape on top of it that doesn't have any shadow. That's the easiest way I've found to make them.

Answered over 9 years ago by Dave
Dave 5

I made a file that will help illustrate what I was referring to with an elliptical vector...


Answered over 9 years ago by Dave
o.k.w 2355

The W3C shadow effect is formed by 2 images:

W3C Logo



This is just one of the ways, some methods use the shadow within the same image depending on your needs.

Here are few tutorials I've googled:
Photoshop cast shadow tutorial in Photoshop
Photoshop Tutorial: Drop Shadows
And many more....

Answered over 9 years ago by o.k.w
  • Thx for the response, but this isn't a typical drop shadow as it has a radius and not a straight edge following the bottom of the images. Sorry I wasn't sure how to word the question but I was looking more for if this trend in specific shadow use was a "style" whose term I didn't know. Jim Holby over 9 years ago
  • @Jim: Guess I misread your question. As Abinadi commented in your post, it's using a radiant gradient for the shadow effect. o.k.w over 9 years ago