Grainy gradients/ backgrounds simplified
Live demo https://codepen.io/thebabydino/pen/ab...
Text & shadow card version https://codepen.io/thebabydino/pen/Vw...
If the work I've been putting out since early 2012 has helped you in any way or you just like it, please consider supporting it to help me continue and stay afloat. You can do so in one of the following ways:
you can be a cool cat 😼🎩 and become a patron on Patreon / anatudor
you can make a one time donation via Ko-fi https://ko-fi.com/anatudor
you can make an anonymous weekly donation https://liberapay.com/anatudor/
you can make me happy by getting me a gift off my wishlist
🎁🇺🇸 https://www.amazon.com/hz/wishlist/ls...
🎁🇬🇧 https://www.amazon.co.uk/hz/wishlist/...
you can share this to show the world what can be done with CSS these days
Thank you!
---
Resources:
My 2021 grainy gradient solution: live demo https://codepen.io/thebabydino/pres/w... / video • Grainy gradient blobs with filters, m...
Original challenge / 1407102532992655361
This solution in text format as a StackOverflow answer https://stackoverflow.com/a/75054687/...
Perlin Noise https://eev.ee/blog/2016/05/29/perlin...
Interactive HSL bicone https://codepen.io/thebabydino/full/N...
Taming Blend Modes: `difference` and `exclusion` https://css-tricks.com/taming-blend-m...
Gradient Blobs & Halftone Effects talk that also includes going into the `multiply` and `screen` blend modes https://codepen.io/thebabydino/projec...
Keyword RGB (and more) equivalents https://meyerweb.com/eric/css/colors/
Safari bug: `filter()` doesn't work with CSS gradient images https://bugs.webkit.org/show_bug.cgi?...
Chromium bug: implement `filter()` https://bugs.chromium.org/p/chromium/...
Firefox bug implement `filter()` https://bugzilla.mozilla.org/show_bug...
---
Chapters
00:00 Problem introduction
00:16 Base setup
00:29 SVG, but out of sight
01:23 Create filter wrapper & reference it in CSS
01:40 Create graininess/ noise
03:42 Fully desaturate noise
05:21 Combine desaturated noise & source graphic
10:07 Prevent noise from spilling out
12:38 Problem #1: shadow
12:56 `filter()` solution
15:06 Problem #2: text
15:57 `filter()` to the rescue once more
16:54 Cross-browser fallback
18:35 The bugs filed for this
19:48 Future video teaser
19:59 That's all, folks! 🐷
#svg #css #filter