#tinySVGtip Give a box with a (semi)transparent background a gradient shadow!

Create absolutely positioned pseudo covering entire parent border-box
https://mastodon.social/@anatudor/111494048104942509

Place it behind parent with z-index.

Set desired gradient on it. Apply a super simple SVG filter that blurs & offsets it, then subtracts original out of it.

@codepen demo https://codepen.io/thebabydino/pen/jOvPgNd

#svg #filter #svgFilter #gradient #cssGradient #gradientShadow #code #coding #frontend #web #webDev #webDevelopment #dev

Btw, same technique also works for gradient box shadows, as illustrated here https://stackoverflow.com/a/76303333/1397351

Works cross-browser (support should go all the way back to IE11!), no need for any extra tricks for an element with a (semi)transparent background & perhaps even rounded corners.

#css #svg #gradientShadow #cssGradient #svgFilter #coding #frontend #webDev #webDevelopment

🔴⚪️ Different Ways to Get CSS Gradient Shadows
by T. Afif @ChallengesCss at @css
#css #webdev #GradientShadow #boxshadow #gradient

https://css-tricks.com/different-ways-to-get-css-gradient-shadows/