Typography: Individual Character Shadows

Hi all, :slight_smile:

I saw this text style a while ago which was all bunched up with each character casting a shadow over the previous one.

I’ve replicated this in webflow, but only by using text spans on every single character. So a little time consuming! :wink:

Is there a way to do this that I’m missing? Any tips would be really appreciated. Thanks!

2 possible ways that could make it work, but I think aren’t features within Webflow yet are:

  • Copy and paste the individual character (doesn’t seem to work, just copies whole chunk of text)

  • Apply classes to multiple elements (I believe this has been requested already on the wishlist).

Also in regular HTML/CSS - no way to create this effect without extra spans/wrappers.

Maybe by jquery wrap each letter with span with shadow class - the idea ± (You should know little JS):

Styling the individual characters (Your answer by code):

https://stackoverflow.com/questions/1966476/how-can-i-process-each-letter-of-text-using-javascript

I don’t believe webflow will give a solution for this (This is Very Very Very specific effect).

Haha, yes - of course. I wouldn’t expect them to :wink: It is very specific. Just wanted to know if I was missing something. I assumed it would be beyond HTML & CSS - I will check out those links you posted. Thanks very much man.

The code is very easy (Only select the correct element (2) + add your class name (1) )
image

Example:

1 Like