DEV Community

CSS Shadow Guides

box-shadow, text-shadow and everything about this property! Just don't overdo the shadows, that's never a good look. πŸ˜…

This is a collection of top and trending guides written by the community on subjects related to CSS Shadow properties. For all things CSS, check out the CSS tag! Please contribute more posts like this to help your fellow developer in need.

Tailwind CSS static navbar with shadow on scroll for Vue applications

For most of my projects I want that smooth shadow under the navbar - here's the code I use to achieve it.

Box shadow vs. drop shadow in CSS

We all know that we can use box-shadow to add shadows to our HTML elements. eg

CSS Shadow Parts are coming!

Another feature that is often needed for elements inside shadow tree is an ability to style certain states like :hover. We can achieve it with ::part – and that's how it naturally fits into the way of writing CSS we are used to:

While other user-action pseudo-classes like :focus are also allowed to be used with ::part, the spec clearly states that structural pseudo-classes (e. g. :first-child, :nth-of-type(), :empty and so on) are not supported.

Power of Box-shadow in CSS

If you want to add any shadow effect around any html element you can use box-shadow. In this Blog we will just see, How it works for different values.

Making Neon Light with Box-shadow property

In this pen you can see how to make a neon lighted button with box-shadow and animated border with svg.

Beautiful box-shadow examples - A curated collection of 83 free beautiful box-shadow 🎨

So I made this collection of my favorite box-shadow on the internet, and I'll be adding new shadows to the list every time I see some new ones.

CSS Drop Shadow vs Box Shadow

The other day Josh made a super cool tweet about drop-shadow supporting PNG's; I didn't know it supported PNG's, so I decided to give it a go.

Using CSS shadow parts in web components

Its inner shadow DOM may look like this:

How to use the Shadow DOM to isolate styles on a DOM that isn’t yours

Shadow DOM allows hidden DOM trees to be attached to elements in the regular DOM tree β€” this Shadow DOM tree starts with a shadow root underneath which can be attached to any elements you want in the same way as the normal DOM.> -Using Shadow DOM

How I rebuilt my website and learned about Shadow DOM

Typically I would have expected the <zero-md> tag to have the markdown-styles and markdown-body tags directly under it, which would make trying to access those nodes super trivial. My initial pass at this was to use the querySelector API and basically do something like document.querySelector('markdown-body') to give me access to the child nodes. However, that just didn't work! I noticed in this case there is that sneaky shadow-root right inside of the zero-md tag. My first reaction was WHAT THE HECK IS SHADOW-ROOT?, and turns out that was the right question to ask, because understanding Shadow root, and consequently Shadow DOM, was key to solving my frontmatter issues.

What is Shadow DOM??

This is the link, I referred to understand.

Tailwind CSS drop shadow effect for PNG images

Did you know that you can apply a drop-shadow to PNG images? This drop shadow will follow the outline of the image!

Curated presets & box-shadow editor for devs & designers

Abinav Seelan and I built a site to curate beautiful box-shadow based designs we found from around the web - to spark design inspiration when we start new projects.

Box Shadow in CSS (Part-1)

When thinking of designing a website, the thing I'm always most excited about is using box-shadow. Box shadow seems to be a simple topic but actually it is a very vast topic. I will conclude it in 3 parts from 0 to best the I can. So this blog is about the basics of the box-shadow.

100 CSS Box Shadow Presets

CSS box-shadow is a fabulous CSS property. It adds shadow effects around an HTML element. Adding multiple effects separated by commas is my favorite feature of this box-shadow property.

I built a box-shadow generator

I built an open-source CSS box-shadow generator this week.

Style CSS properties on an element inside of a shadow tree

CSS card shadow effects

Specifics of the design for the larger shadow are as follows (extracted from Figma):

Happy CSS Shadow coding!