Shadow Usage in Web Design

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 […]

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.

shadows01

Photosheep.me

Subtle shadow at the main image, the sheep.

shadows02

Campaign Monitor

Beautiful shadow/reflection under the image.

shadows03

Andrew McClintock

Super elegant and beautiful shadow under the main icons.

shadows04

Allison House

Header and menus uses typography with text shadows.

shadows05

Alfred

Another good example of subtle shadow under the main icon.

shadows06

cornerd

All characters have shadows, nice example of attention to details.

shadows07

Cuban Council

Beautiful and subtle shadows on menu texts.

shadows08

Cappen

Also a good example of character shadow, super discrete and beautiful.

shadows09

Woodinville Whiskey Co

Elegant shadows under main images.

shadows10

Dark Sky

Super discrete and beautiful text shadow on header.

shadows11

Night Owl Interactive

Another good example of subtle shadow under images.

shadows12

Scoutmob

Header text and all text boxes have shadows, beautiful result.

shadows13

Margaret Durante

Menus and some texts have beautiful shadows.

shadows14

Kelli Anderson

Beautiful header shadow that gets even stronger when you hover it.

shadows15

Robedwards

Nice text shadows that vary from one type to another.

shadows16

witflow

Subtle shadow at the main image and also some text boxes that feel like shadows.

shadows17

Threadbird

Typography and icons with subtle and beautiful shadow effect.

shadows18

Cure Org

Header with beautiful white shadows around menus.

shadows19

AdPacks

Elegant white shadows on typography and nice shadow effect at the main image.

shadows20

Galpin Industries

Another good example of typography shadow effects.

shadows21

Lost World’s Fairs

Discrete text shadows on header.

shadows22

Redup

Beautiful and elegant image shadow.

shadows23

Lila & Claudines

Beautiful text shadows when you hover menu. Also some image shadows.

shadows24

Two Giraffes

Very subtle image shadows and also some hover shadows.

shadows25

Source:

The Best Designs
Pattern Tap

Tagged with:

Gisele Muller

Gisele Muller is the Co-founder of Refilmagem and Mentaway, and also the editor for the Portuguese version of Abduzeedo, Abduzeedo Brazil. She loves communication, creativity, technology and everything in between.

Stay up to date with the latest web design and development news and relevant updates from Codrops.

Feedback 5

Comments are closed.