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

Articles Tagged
shadow

12 Articles
{
,

}
Direct link to the article Different Ways to Get CSS Gradient Shadows
box-shadow gradients shadow

Different Ways to Get CSS Gradient Shadows

It’s a question I hear asked quite often: Is it possible to create shadows from gradients instead of solid colors? There is no specific CSS property that does this (believe me, I’ve looked) and any blog post you find about …

Temani Afif on Feb 10, 2023
Direct link to the article How to Make a Folder “Slit” Effect With CSS
blur shadow

How to Make a Folder “Slit” Effect With CSS

When you put something — say a regular sheet of paper — in a manilla folder, a part of that thing might peek out of the folder a little bit. The same sort of thing with a wallet and credit …

Preethi on Oct 19, 2022
Direct link to the article A Serene CSS Dappled Light Effect
emoji mix-blend-mode shadow

A Serene CSS Dappled Light Effect

There’s a serene warmth to the early evening sunlight peaking through rustling leaves. Artists use dappled light to create a soft, hypnotic effect.

Bedford Dwellings by Ron Donoughe (2013)

We can create the same sort of dappled light effect in …

Preethi on Jan 19, 2022
Direct link to the article Scroll Shadows With JavaScript
scrolling shadow

Scroll Shadows With JavaScript

Scroll shadows are when you can see a little inset shadow on elements if (and only if) you can scroll in that direction. It’s just good UX. You can actually pull it off in CSS, which I think is …

Chris Coyier on Jul 28, 2022
Direct link to the article Designing Beautiful Shadows in CSS
shadow

Designing Beautiful Shadows in CSS

My favorite kind of blog post is when someone takes a subject that I’ve spent all of five minutes considering and then says—no!—this is an enormous topic worthy of a dissertation. Look at all the things you can do with …

Robin Rendle on Sep 17, 2021
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)
…
Joel Olawanle on Jun 11, 2021
Direct link to the article Creating Colorful, Smart Shadows
background emoji shadow

Creating Colorful, Smart Shadows

A bona fide CSS trick from Kirupa Chinnathambi here. To match a colored shadow with the colors in the background-image of an element, you inherit the background in a pseudo-element, kick it behind the original, then blur and filter it. …

Chris Coyier on May 4, 2021
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.…

Rob O'Leary on Jun 7, 2021
Direct link to the article Simulating Drop Shadows with the CSS Paint API
css paint api houdini shadow

Simulating Drop Shadows with the CSS Paint API

Ask a hundred front-end developers, and most, if not all, of them will have used the box-shadow property in their careers. Shadows are enduringly popular, and can add an elegant, subtle effect if used properly. But shadows occupy a strange …

Steve Fulghum on Dec 29, 2020
  • 1
  • 2
  • Older

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