Mastodawn

Retro dotted shadow text on @codepen https://codepen.io/thebabydino/pen/rNbKOpL

Contenteditable, no JS, no text duplication whatsoever, no images save for code-generated ones. More #SVG #filter magic! 🪄✨

#svgFilter #CSS #radialGradient #retro #cssGradient #textEffects #textEffect #code #coding #frontend #web #dev #webDev #webDevelopment

Learn JavaScript, React, and TypeScript to Node.js, Fullstack, and Backend [Unofficial]Apr 14, 2025

Minimal CSS-only blurry image placeholders

https://fed.brid.gy/r/https://frontendmasters.com/blog/minimal-css-only-blurry-image-placeholders/

Minimal CSS-only blurry image placeholders – Frontend Masters Blog

I’m not the world’s biggest fan of LQIP’s (low quality image placeholders) generally (doing nothing other than handling aspect ratio is… fine), but I really like how much creativity it inspires. I’ve seen a ton of different approaches to it over the years, that all use different technology and all have different advantages and disadvantages. […]

Show thread

Ana Tudor 🐯Feb 28, 2025

Made a gallery of such #SVG gradient + #filter effects blobs on @codepen
https://codepen.io/thebabydino/full/YPzNWoR

Also includes an explanation of the how behind and interaction: the focal point of the `radialGradient` the blobs start from follows the cursor on hover.

Different blobs for light/ dark mode. 😼

#svgGradient #cssGradient #blob #grainy #radialGradient #svgFilter #grain #code #coding #frontend #distortion #web #dev #webDev #webDevelopment #filterEffect

Grainy distorted gradient blobs

Prompted by a question [from reddit](https://www.reddit.com/r/css/comments/1j03iyv/comment/mf89ri9/), for which I also created [this Pen](https://codep...

Ana Tudor 🐯Feb 28, 2025

Grainy distorted gradient blob: 1 #SVG `radialGradient` (setting a focal point `fx,fy`) vs. multiple #CSS `radial-gradient()` layers (no option to control focal point).

Using filters for distortion & grain effect.

A bit more detail on this https://www.reddit.com/r/css/comments/1j03iyv/comment/mf89ri9/

#svgGradient #cssGradient #blob #grainy #radialGradient #svgFilter #filter #grain #code #coding #frontend #distortion #web #dev #webDev #webDevelopment