How to create this effect?

Hello Webflow community!

I’m trying to discover how to create this effect where the photo stays positioned between the black text and the yellow outline of the same text.

Since i cannot and a inner outline natively like in Illustrator, how could i create this yellow inner outline and position it on top of the text and the photo?

Thank you for your time!


1 Like

Hello @lucaselias, that is a cool website. So what they are doing is kind of simple but pretty smart. The image is “sandwiched” between the black text and the outlined yellow text. So what you have to do is have a container with three layers, first the one with black text, second the image, and thirdly the one with the yellow outline. I hope this helps!

1 Like

Thank you for you reply! Just one more question. Do you think the outline yellow its just a png created in another graphic program or its a code solution?

You can use a png since the outlined content is merely decorative and it will not impact you SEO, or you can use code to achieve the same effect. I think with code it would be easier, but it might not, its kind of a trial and error type of thing. Just make a prototype and see what works best with your design. I hope this helps!

1 Like

Thank you so much Pablo!

1 Like