Shadow Palette Generator – CSS-Tricks


Josh’s Shadow Palette Generator is a fantastic tool. The premise is that box-shadow pretty much always looks better when there are multiple layered shadows that are a bit tinted. It reminds me of how gradients almost always look better when eased. The generator does that, but also does three levels of them so you’ve got some “height” options for your shadows—plus, it sets them up as custom properties so they are more easily reusable. Same vibe as Open Props.

Some of the generated shadows use the fourth length value (the “spread”). The text-shadow property doesn’t support spread, but if you rip those numbers off, it pretty much works for text as well:

Direct Link →

Source link

About Author


Please enter your comment!
Please enter your name here

Share post:




More like this

UIBundle: A One-Stop Shop for Design Resources, Freebies, & Tips

Every designer has a favorite website where...

Collective #784

State of HTML 2023 * Nue * The...

How to Create CSS Ribbon Shapes with a Single Element — SitePoint

In this article, I’ll show you how to...

Market Test: Get Real Human Feedback on Your Designs

Conjointly’s Market Test is a suite of...