Steve Fulghum takes a look at how we can use Houdini’s Paint API to paint a complex shadow.
See the Pen Simulating Drop Shadows with the CSS Paint API by Steve Fulghum ( @steve_fulghum) on CodePen.
🎩 Houdini, ain't that a magician?
Houdini is a set of low-level APIs that exposes parts of the CSS engine, giving developers the power to extend CSS by hooking into the styling and layout process of a browser’s rendering engine. Houdini is a group of APIs that give developers direct access to the CSS Object Model (CSSOM), enabling developers to write code the browser can parse as CSS, thereby creating new CSS features without waiting for them to be implemented natively in browsers.
It really is magic, hence it's name Houdini. I'd recommend
this slidedeck and this video to get you started
If you’re interested into making your first Paint Worklet with Houdini, you can easily follow along with the article/tutorial.
Simulating Drop Shadows with the CSS Paint API →
I like how this box animates on hover, thanks to the use of multiple
If you try to capture the subtleties of a real shadow with
box-shadow then, well, you’re pretty much out of luck. The
box-shadow CSS property isn’t exactly built to encourage expressiveness.
But with a simple CSS technique, we can expand our range of options. If we use layered box-shadows we can get more fine-grained control over how shadows are rendered
/* Default box-shadow */
box-shadow: 0 3px 3px rgba(0,0,0,0.2);
/* Create smoother box-shadows by layering multiple
* shadows with gradually increasing radius and offset */
box-shadow: 0 1px 1px rgba(0,0,0,0.12),
0 2px 2px rgba(0,0,0,0.12),
0 4px 4px rgba(0,0,0,0.12),
0 8px 8px rgba(0,0,0,0.12),
0 16px 16px rgba(0,0,0,0.12);
Inspired by this post,
Philipp Brumm built a generator to generate such shadows:
Smoother & sharper shadows with layered box-shadows → Shadow Generator →
This version of Shadow focuses primarily on the following:
Local Host URL Support
Adobe Edge Integration
Improved workflows for sticky caches, HTTP Authentication Support and URL Monitoring
Shadow – Labs Release 2 now available →
Adobe Shadow on Adobe Labs →