#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

Gradient shadow + semi-transparent background (cross-browser, should work all the way back to IE)

...

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

drop shadow CSS with a gradient

Im working on a project using HTML and CSS and I want to replicate something like this used on this site. http://slb.com/hse/hse_policy.aspx The drop shadow that surrounds the container div aroun...

Stack Overflow

🔴⚪️ 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/

Different Ways To Get CSS Gradient Shadows | CSS-Tricks

It’s a question I hear asked quite often: Is it possible to create shadows from gradients instead of solid colors? There is no specific CSS property that does

CSS-Tricks