The fifth is a pure #CSS text effect.

https://codepen.io/thebabydino/pen/XWQQRWG

No text duplication whatsoever, no pseudos, no images save for CSS gradients. Just a single div and a few heavily commented CSS declarations.

Unfortunately broken in Firefox due to an old bug 🪲 https://bugzilla.mozilla.org/show_bug.cgi?id=1481498

#cssGradient #cssPattern #textEffect #textEffects #code #coding #frontend #web #dev #webDev #webDevelopment #blue

The sixth is a little pure #CSS #3D thing I quickly make in under 10 minutes https://codepen.io/thebabydino/pen/wvbWYyd

I really didn't expect anyone would even notice such a silly simple little thing and then it got hearted over 200 times...

#code #coding #fronten #textEffect #web #dev #webDevelopment #webDev #textEffects

The eighth is this no text duplication blended layers demo https://codepen.io/thebabydino/pen/abxLyxw

Uses #CSS gradients and some #SVG #filter magic 🪄 to get the effect - can you figure out how before checking it out on @codepen?

#svgFilter #textEffect #textEffects #coding #code #frontend #web #dev #webDev #webDevelopment

11! of my demos throughout the first @codepen trending pages!

#SVG #CSS #filter #3D #svgFilter #graphicEffect #textEffects #texture #css3D #transform #code #coding #web #dev #webDev #webDevelopment #frontend

The first one is this text effect that uses absolutely no images whatsoever save for #CSS gradients.

Some #SVG filter magic 🪄 is responsible for the background texture and also for the 3D look of the text and its grainy gradients.

https://codepen.io/thebabydino/pen/gONbppb

#filter #svgFilter #texture #textEffect #textEffects #noise #cssGradient #code #coding #3D #3dText #frontend #web #dev #webDev #webDevelopment