Skip to main content
CSS-Tricks
  • Articles
  • Notes
  • Links
  • Guides
  • Almanac
  • Picks
  • Shuffle
Search

Articles Tagged
drop-shadow

2 Articles
{
,

}
Image
Direct link to the article Adding Shadows to SVG Icons With CSS and SVG Filters
drop-shadow filter shadow SVG svg filters

Adding Shadows to SVG Icons With CSS and SVG Filters

Why would we need to apply shadows to SVG?

  1. Shadows are a common design feature that can help elements, like icons, stand out. They could be persistent, or applied in different states (e.g. :hover, :focus, or :active)
…
Image
Joel Olawanle on Jun 11, 2021
Image
Direct link to the article Getting Deep Into Shadows
box-shadow drop-shadow filter shadow text-shadow

Getting Deep Into Shadows

Let’s talk shadows in web design. Shadows add texture, perspective, and emphasize the dimensions of objects. In web design, using light and shadow can add physical realism and can be used to make rich, tactile interfaces.…

Image
Rob O'Leary on Feb 22, 2021 Updated on Jun 7, 2021

CSS-Tricks is powered by DigitalOcean.

Keep up to date on web dev

with our hand-crafted newsletter

DigitalOcean
  • About DO
  • Cloudways
  • Legal stuff
  • Get free credit!
CSS-Tricks
  • Contact
  • Write for CSS-Tricks!
  • Advertise with us
Social
  • RSS Feeds
  • CodePen
  • Mastodon
  • Bluesky
Back to Top
Advertisement