The tenth is this no text duplication stroke shadow 🌊
https://codepen.io/thebabydino/pen/mdoPoJz

Absolutely no text duplication, not in the markup, not in any pseudo-element content.

The outline shadows are tiled down using an #SVG #filter, which is also responsible for the wave 🌊 distortion. 🪄

#svgFilter #CSS #gradient #cssGradient #code #coding #frontend #web #dev #webDev #webDevelopment

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 third is something I quickly made to answer a question I saw on reddit https://reddit.com/r/css/comments/1fwm87i/comment/lqg11fl/

It's similar to something you can find on a lot of websites with a couple extra constraints:
✨ no extra elements, no pseudos
✨ working fine on top of image background

#CSS #cssGradient #mask #cssMask #code #coding #frontend #web #dev #webDev #webDevelopment

The second is a quick little thing I live-coded in Professor Mode on @codepen in under 15 minutes a little while back.

Just like the first, it has absolutely no text duplication, not in the markup and not in pseudo content.

A little #SVG #filter magic 🪄 slices and offsets it https://codepen.io/thebabydino/pen/RwmPZVR

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

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

#tinyCSStip Simplest circle sector in 4 CSS declarations!

1⃣ set width to desired diameter
2⃣ square element with aspect-ratio
3⃣ turn square into disc
4⃣ conic-gradient() magic! 🪄

The start angle and sector angle can also be animated for fun results.

Because someone asked https://www.reddit.com/r/css/comments/1fvo5dl/comment/lq9mtjj/

#CSS #gradient #cssGradient #code #coding #frontend #web #dev #webDev #webDevelopment