From our sponsor: Meco is a distraction-free space for reading and discovering newsletters, separate from the inbox.
When designing a website you can use several effects to drive attention to an element, emphasize something or simply to give your page an unique and personal touch. From underlines to color schemes, bold texts, shadows, borders and an enormous number of effects, there is an effect for every taste and functionality. Shadows are good to emphasize texts, links and also to give that special ‘detail driven’ touch to an image.
Here we will show you 25 good examples of shadow usage in web design, so enjoy it and give shadows a chance on your next design. 😉
Information Highwayman
Beautiful and subtle shadow effect when we hover the menus.
Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.
Photosheep.me
Subtle shadow at the main image, the sheep.
Campaign Monitor
Beautiful shadow/reflection under the image.
Andrew McClintock
Super elegant and beautiful shadow under the main icons.
Allison House
Header and menus uses typography with text shadows.
Alfred
Another good example of subtle shadow under the main icon.
cornerd
All characters have shadows, nice example of attention to details.
Cuban Council
Beautiful and subtle shadows on menu texts.
Cappen
Also a good example of character shadow, super discrete and beautiful.
Woodinville Whiskey Co
Elegant shadows under main images.
Dark Sky
Super discrete and beautiful text shadow on header.
Night Owl Interactive
Another good example of subtle shadow under images.
Scoutmob
Header text and all text boxes have shadows, beautiful result.
Margaret Durante
Menus and some texts have beautiful shadows.
Kelli Anderson
Beautiful header shadow that gets even stronger when you hover it.
Robedwards
Nice text shadows that vary from one type to another.
witflow
Subtle shadow at the main image and also some text boxes that feel like shadows.
Threadbird
Typography and icons with subtle and beautiful shadow effect.
Cure Org
Header with beautiful white shadows around menus.
AdPacks
Elegant white shadows on typography and nice shadow effect at the main image.
Galpin Industries
Another good example of typography shadow effects.
Lost World’s Fairs
Discrete text shadows on header.
Redup
Beautiful and elegant image shadow.
Lila & Claudines
Beautiful text shadows when you hover menu. Also some image shadows.
Two Giraffes
Very subtle image shadows and also some hover shadows.
good collection. awesome work, Thanks for sharing such beautiful websites.
WoW! I think that my site needs some shadows
Hey thanks for featuring our site in your post!!
WOW Great examples – thank you!!
juzz wow….:o