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 concepts. 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!
CSS Shadow Parts proposal is among the most waited additions to the standard for developers who create customizable components and design systems. It is a new API for styling individual elements in Shadow DOM from outside. This lets to make a single instance of certain UI widget look slightly differently – an ability that we often need in the real world apps.
CSS box-shadow on all four sides
The following CSS code create a box Shadow appears equally on all four sides.
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.
The Quirks of Shadow DOM and How to Take Advantage of Them
While Shadow DOM is considered one of the core standards that make up Web Components it's
actually been in the browsers for quite a while as native HTML Elements like<video>
use it, it just wasn't available for developers to use before it was incorporated in the Web Components standard.
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
While both solutions can work, they both have rather frustrating aspects you will have to deal with. Below I'll go over a few examples of what I’ve done in the past and then cover what this blog post is all about – the fancy, new, futuristic way to make composite user interfaces, or the Shadow DOM.
How I rebuilt my website and learned about Shadow DOM
Typically I would have expected the
<zero-md>tag to have themarkdown-stylesandmarkdown-bodytags directly under it, which would make trying to access those nodes super trivial. My initial pass at this was to use thequerySelectorAPI and basically do something likedocument.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 sneakyshadow-rootright inside of thezero-mdtag. 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??
Shadow DOM is basically a sub-tree of DOM elements, which is included during rendering of the document but not included in the main document DOM. In other words, the content of a Shadow DOM is a different document, which is merged with the main document to create the overall rendered output.
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.
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.
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.
I built a box-shadow generator
I built an open-source CSS box-shadow generator this week.
How to share styles in the Shadow DOM
The Shadow DOM is great for insulating your Web Components from global style rules, but what do you do if you want to share common styling between components? One approach is to duplicate style rules across components but that can be inefficient and a maintenance headache - surely there's another way?
Style CSS properties on an element inside of a shadow tree
After introducing Shadow DOM in IONIC most of us searching and finding a way to modify style of IONIC components. Fortunately they have exposed many css4 variables to modify the components but we can't access the html elements inside the Shadow DOM.
CSS card shadow effects
Specifics of the design for the larger shadow are as follows (extracted from Figma):
Happy CSS Shadow coding!
