9️⃣ 593 ❤️ Cycling gradient glow with no text duplication - see it on @codepen https://codepen.io/thebabydino/pen/rNPOpJK
A super simple, but cool #SVG #filter trick.
We create the gradient text.
The filter creates a blurred copy of it and places it underneath.
We then animate the #CSS #gradient stops... magic! 🪄✨
#cssGradient #svgFilter #glow #coding #filterEffect #gradientGlow #frontend #web #dev #webDev #webDevelopment #code
Someone asked how to get such a card with text content, transparent background, rounded corners and a rotating inner edge rainbow gradient glow, so here's my take on it https://www.reddit.com/r/css/comments/1gpzzgu/comment/lwvj967/
Live demo on @codepen
https://codepen.io/thebabydino/pen/WNVPdJg (single div, heavily commented)
#CSS #gradient #gradients #cssGradient #glow #gradientGlow #code #coding #web #dev #webDev #webDevelopment #frontend
One of my most popular #CodePen demos of the past month: cycling gradient text glow https://codepen.io/thebabydino/pen/rNPOpJK
✨ very little #CSS + a simple #SVG filter
✨ no images whatsoever save for a CSS gradient
✨ no text duplication
✨ cycling gradient effect obtained just by animating a CSS variable
#coding #frontend #webDev #webDevelopment #svgFilter #cssGradient #gradientText #textGlow #glow #textEffect #gradientGlow #cssVariables #houdini #graphical #effect
Ana Tudor 🐯