Grainy Backgrounds with CSS and SVG Filters

🚀Join my free tech newsletter: https://got-sheet.beehiiv.com/

How to make grainy backgrounds using CSS and SVG Filters. We'll walk through three methods for creating the grainy backgrounds. One using a PNG image, one using an SVG image and one using inline SVG code straight in our CSS!

Arc browser site: https://arc.net/
Arc website noisy PNG: https://arc.net/noise.png
Grainy Gradients Playground: https://grainy-gradients.vercel.app/
URL-Encoder for Inline SVG code: https://yoksel.github.io/url-encoder/

Full article: https://www.freecodecamp.org/news/gra...

00:00 Intro
01:20 Setup code
03:00 PNG background-image method
04:19 SVG background-image method
05:55 Code for SVG file
07:07 CSS for SVG image
07:40 Inline SVG in CSS method
09:00 Convert SVG to inline Code

😀 Please subscribe to my channel for more coding and spreadsheet content: https://www.youtube.com/@eamonncottre...

You can find more of my work including articles and podcasts on my website at https://www.eamonncottrell.com/

#css #backgrounds #svg ⭐⭐Some of My Computer Desk Gear for Data Analysts (affiliate links support my channel's growth 😀)
►Keychron Q5...my new favorite; it's lovely especially with the quiet keycaps: https://amzn.to/3NLn57r
►Keychron's Full Product Line...https://amzn.to/3rtitv7
►DeltaHub Ergonomic Wrist rest. I was skeptical, but it has done wonders for my desk-wrist soreness. https://amzn.to/3O7cRQi
►Uplift Standing Desk...I love this thing. I also sit at it a lot, which I'm ok with 😀https://amzn.to/3XPAmAM
►Logitech THX 2.1 Speakers...great sound at an affordable price... https://amzn.to/3D9InXr
►Phone stand for Desk...surprisingly handy to have phone on a stand. And cheap...https://amzn.to/3D8ODid