Discussion
Loading...

#Tag

Log in
  • About
  • Code of conduct
  • Privacy
  • Users
  • Instances
  • About Bonfire
Ned ‘Jonathan’ Schofield
Ned ‘Jonathan’ Schofield boosted
Ana Tudor 🐯
@anatudor@mastodon.social  ·  activity timestamp yesterday

So what else could we do? Use an SVG filter!✨

Set the #CSS gradient as one with two end stops and no steps and apply a super simple #SVG #filter (same idea as here https://mastodon.social/@anatudor/114703583973454917 ) that makes it stepped.

Works for all gradient types - see this @codepen demo https://codepen.io/thebabydino/pen/raVrZQN 😼

#cssGradient #code #coding #frontend #web #dev #webDevelopment #webDev #svgFilter #cssVariables

Different types of gradients (linear, radial, conic) turned stepped via a simple SVG `filter`.
Different types of gradients (linear, radial, conic) turned stepped via a simple SVG `filter`.
Different types of gradients (linear, radial, conic) turned stepped via a simple SVG `filter`.
  • Copy link
  • Flag this post
  • Block
Log in

Bonfire social

This is a bonfire demo instance for testing purposes

bonfire.cafe: About · Code of conduct · Privacy · Users · Instances
Bonfire social · 1.0.0-rc.1.19 no JS en
Automatic federation enabled
  • Explore
  • About
  • Members
  • Code of Conduct