Streaming live at 10am (PST)

Double Shadow Help


#1

Trying to recreate a double shadow using text shadows, like on this page. I've created a text block with white text that is overtop of a photo background, so in order for the shadow to work properly, the first shadow would have to be transparent (to match the photo). The second shadow would then have to be white, to match the original text.

The problem is that if you make the first shadow transparent, it just shows the white from the second shadow. I could do this easily in photoshop, but I'm trying to do it solely with text in Webflow. Anyone have any ideas?


#2

Hi @jordanshotwell,

Which exactly effect from example page you are trying to re-create?


#3

Hey @sabanna. The "vintage/retro" effect, with two shadows on the text. The first shadow would need to be transparent to show the photo behind all the text, and the second shadow would have to be white. See the screenshot above of "Woodward" (Though I had to use black for the first shadow, to show you want I'm trying to achieve).


#4

And why did you decide to set 1st shadow to transparent?

That effect creates by 1st shadow having same color as a background. Since you do not have solid color background maybe you will want to try some green color similar to that grass color on the background. bacause transparent shadow will do NOTHING, because it is transparent.


#5

@sabanna is absolutely right. The first shadow needs to match the background color, then you'll be golden! :smiley:

Example video:


#6

@sabanna @McGuire that's what I'm trying to counteract. Because there's a second shadow, the first one assumes that color when set to transparent. Do you know of any way around this?


#7

The first shadow doesn't "assume" anything. It's simply transparent. It might as well not be there. To achieve the retro effect you're looking for, you'll need to match the first shadow color to your background color.

Now if you're trying to do this on a photo or video background, this is something you'll need to do using an SVG or PNG from an application like Illustrator. Seems like that's what you're looking for based on your screenshot.


#8

Okay, thanks. Just curious if there was any other workaround to achieve this directly within Webflow.


#9

No problem—I've researched the same thing and found it incredibly easy to manage once I created an SVG. Outlines/shadows can render oddly on different devices, and they don't scale well when they're being used on things like scalable elements. The SVG route ensures it renders fine on every device every time.

Let us know how it works out. In Illustrator, after converting a text block to outlines, the Pathfinder tool is very helpful to subtract the "middle" text so you're left with a transparent effect.


#10

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.