Show threadAna Tudor 🐯May 27, 2024

7⃣ 545 ❤️ Cycling gradient glow - no text duplication https://codepen.io/thebabydino/pen/rNPOpJK

A simple #SVG filter trick.

We create the gradient text.

The filter creates a blurred copy of it and places it underneath.

We then animate the gradient stops... magic! 🪄✨

#css #svgFilter #filter #filterEffect #glow #text #textEffect #textGlow #cssGradient #code #coding #frontend #web #webDev #dev #webDevelopment

Cycling gradient glow - no text duplication

No text duplication in the markup or in a pseudo's content. The effect is achieved with a simple, compact, easy to read SVG filter. This filter first ...

Ana Tudor 🐯Nov 21, 2023

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

Cycling gradient glow - no text duplication

No text duplication in the markup or in a pseudo's content. The effect is achieved with a simple, compact, easy to read SVG filter. This filter first ...