#textEffects

Ana Tudor 🐯anatudor
2026-01-27

Which do you prefer? First or second?

(it's the exact same demo, text and font, only different filters, btw)

Boosts appreciated.

The text "neon light" in a neon style. The word "neon" is in all caps in a medium geometric font, with a royalblue glow. The word "light" in in title case in a pretty, thin handwritten font, with a hotpink glow.The text "neon light" in a neon style. The word "neon" is in all caps in a thick geometric font, with a royalblue glow around the outline - in this case, it's not filled, just outlined and it's thicker. The word "light" in in title case in a pretty, thin handwritten font, with a hotpink glow.
Ana Tudor 🐯anatudor
2026-01-23

Torn on @codepen: codepen.io/thebabydino/pen/XWQ

Absolutely no text duplication whatsoever, not in the markup, not in the `content` of any pseudo. No images save for the "newspaper" background (which doesn't include the torn edges, screen #2) and for gradients.

Just some magic! 🪄✨

Demo screenshot.

Shows the text "dreams" in all caps, split on two lines equally. The text has a torn split such that the middle secondary diagonal strip has a newspaper-like image fill, while the top left and bottom right corners have a wooden-like fill, with an inner neon blue outline inside. These parts (diagonal and corner ones) have torn edges where they meet.

On the right, the DevTools panel is open to show there is no text duplication whatsoever involved here.Newspaper-like text background.
Ana Tudor 🐯anatudor
2026-01-22

Multilayer candy effect with no text duplication. In fact, this is contenteditable, no JS required 🐱

Check out the live demo on @codepen codepen.io/thebabydino/pen/XWO

Just a bit of magic! 🪄✨

Ana Tudor 🐯anatudor
2026-01-22

Extrusion (long shadow) with no long list of shadows, no text duplication, just a super simple - check it out on @codepen codepen.io/thebabydino/pen/mdo

The text Berlin with an orange face and a black extrusion (long shadow).
Ana Tudor 🐯anatudor
2025-12-26

Another text effect on @codepen: codepen.io/thebabydino/pen/ZEZ

No text duplication whatsoever, no part of the effect baked into the font, no images save for the CSS gradient backdrop, no JS.

All done with magic 🪄✨ - can you figure out how before checking the code?

Ana Tudor 🐯anatudor
2025-12-24

A text effect on @codepen codepen.io/thebabydino/pen/Pog

No text duplication, no images save for CSS gradients, no part of the effect baked into the font, no JS. It's all clever and magic! 🪄✨

PS re: "trashed panda" 🦝🍾🥂🤪
bbc.com/news/articles/c5y2271q

Ana Tudor 🐯anatudor
2025-12-24

Offset & blended layers effect on @codepen codepen.io/thebabydino/pen/rNb

No text duplication, no images, no effects baked into the font and no JS whatsoever.

All done with some clever and magic! 🪄✨

The text "bamboozled" in small caps. There are two horizontally offset copies of it. The one to the left is orangey, the one to the right bluish, while their intersection is a dark sea green.
Ana Tudor 🐯anatudor
2025-12-23

Split text with blended half shadow on @codepen codepen.io/thebabydino/pen/LYv

No text duplication whatsoever, no images other than gradients, no funky fonts* - all done with magic! 🪄✨

*font used here is fonts.google.com/specimen/Rubi - you can see the effect isn't baked into it

Demo screenshot. The text "success" in all caps with a diagonal half split across its face, the bottom right part having an aqua background in addition to being hashed like the top left part. The bottom right part also has a fuchsia drop shadow that is blended with it.

The fine print at the bottom says, in a much smaller cursive font with less contrast: "wake up early, work hard and never give up, your dreams can come true... if you're born rich!"
Ana Tudor 🐯anatudor
2025-12-22

Retro dotted shadow text on @codepen codepen.io/thebabydino/pen/rNb

Contenteditable, no JS, no text duplication whatsoever, no images save for code-generated ones. More magic! 🪄✨

The text "retro" in all caps, with a torn white face and a slightly rotated dot grid shadow.
Ana Tudor 🐯anatudor
2025-12-22

Retro 3D 🍫🦋 effect on @codepen: codepen.io/thebabydino/pen/bGy

No text duplication whatsoever, no long shadow list, no funky fonts, no JS, no images other than CSS gradients. Extrusion is all magic 🪄✨ - as illustrated by the recording below including the DevTools panel.

Ana Tudor 🐯anatudor
2025-12-20

text with double outlines & inner shadows. Absolutely no text duplication whatsoever needed, not in the markup, not in pseudo content. No funky fonts. Contenteditable with no JS needed.

Can you figure out how before checking my code?

Live on @codepen codepen.io/thebabydino/pen/LYv

Ana Tudor 🐯anatudor
2025-12-20

Slice & offset text without any duplication whatsoever, not in the markup and not in pseudo content (which you can see in the DevTools panel on the right).

Done with magic! 🪄✨

Can you figure out how before checking the code?

Live on @codepen codepen.io/thebabydino/pen/yLW

, , , , , , , , , , ,

Screenshot. Shows the visual result on the left and the DevTools panel open on the right.

The visual result is the text "disruption" in all caps, split on three lines as "dis-rup-tion". The text is sliced diagonally. The top left corner part above the diagonal is painted a sea blue and offset up. The bottom right part below the diagonal is painted orange and offset down.

The DevTools panel on the right highlights the fact that the text isn't duplicated and that the split line angle is given by a custom property.
Ana Tudor 🐯anatudor
2025-12-20

No text duplication. A single image used. All with clever and magic! 🪄✨

Uses `text-orientation: upright` for vertical text. Matrix filter extracts just the red areas of the image. These get intersected/ subtracted from the text.

Live on @codepen.io: codepen.io/thebabydino/pen/dyE

One of my favourite SVG filter demos I've made.

The word "fashion" in all caps over the photo of a woman in a bright red dress. The text has a transparent fill and a white stroke where it intersects the red dress and a black fill with no stroke elsewhere.
Ana Tudor 🐯anatudor
2025-12-18

Here's another 2 techniques in 1 demo on @codepen: double stroke, transparent text, two approaches codepen.io/thebabydino/pen/GgR

Can you figure out any of them before checking the code? Neither uses any duplication whatsoever (no duplicating the text and no duplicating the image as tex fill).

Screenshot of the linked demo. Shows the words "Vintage Experience" with a double stroke (white inner one, black outer one). The text fill is transparent and lets us see through to the image behind.
Ana Tudor 🐯anatudor
2025-12-17

Elongated grainy gradient text shadows. No text duplication whatsoever, just magic! 🪄✨

Live demo on @codepen: codepen.io/thebabydino/pen/NWZ

demo screenshot
2025-10-05

"Text Behind Everything 0.5 (beta)" ra mắt! Công cụ mới giúp nhà thiết kế dễ dàng đặt chữ sau hình ảnh (sắp tới là video). Với các tính năng nổi bật như định vị chính xác, preset văn bản và hiệu ứng blend độc đáo. Miễn phí cho 5 hình ảnh đầu tiên. Hãy trải nghiệm bản beta và chia sẻ phản hồi nhé!
#CôngCụThiếtKế #TextBehindEverything #ThiếtKếĐồHọa #Beta #MiễnPhí #DesignTool #GraphicDesign #TextEffects #BetaRelease #FreeTool

v.redd.it/tw741yqmf9tf1

Ana Tudor 🐯anatudor
2025-09-02

A cool single div poster on @codepen codepen.io/thebabydino/pen/dyE

Real text, no duplication at all, not in the markup, not in pseudo content. A single image used for the backdrop, the magic 🪄 is in a `feColorMatrix` extracting the contrasting red areas to use them for the text split.

Ana Tudor 🐯anatudor
2025-08-27

Comic 3D on @codepen codepen.io/thebabydino/pen/abM

A little text effect demo with outline, inner shadow, pattern and extrusion effect.

No images other than gradients, no text duplication whatsoever, contenteditable.

An does the magic! ✨🪄🎩🐇

All caps text with halftone effect fill, inner shadow and 3D effect. DevTools panel open on the right to highlight the fact that this is `contenteditable` and there is no text duplication whatsoever, not in the markup and not in any pseudo-element's `content`.
Virtual Curiositiesvirtual_curiosities
2025-07-22

A for the knockout text effect in . Probably one of the easiest effects you can make.
youtube.com/watch?v=SuD0Ui27GZw

Virtual Curiositiesvirtual_curiosities
2025-06-23

A for creating a glowing text effect in , which is non-destructive and can be used in illustrations as well.
virtualcuriosities.com/article

Client Info

Server: https://mastodon.social
Version: 2025.07
Repository: https://github.com/cyevgeniy/lmst