New Feature: Text Shadow Effect [Including 7 Examples]

In this post, you will learn to create 7 examples for our most recent FREE feature: Text Shadow. Make your headlines more effective by adding a stunning text shadow effect, no coding required.

Want to instantly make your headlines look better?

Choosing the right font, line height, letter spacing and other typography settings are a good start, but what next?

Using the new Text Shadow effect in Elementor is a great way to create an eye-catching headline that is bound to draw the attention of your site visitor.

The new Elementor text shadow effect is part of Elementor V1.6, which also featured our image & gallery lightbox feature, bulk templates upload and more new features.

In this tutorial, I want to go over 7 text shadow examples, including the exact settings to reach each effect.

1. The Plain Ol' Text Shadow

Even without doing to many alterations, text shadow works really nice in accentuating almost any headline. Make sure you don't overdue it though. We don't want to get a page where every headline has a text shadow...

How to do it? 

  • Font Family: Roboto
  • Color: #b2b2b2
  • Blur: 22
  • Horizontal: 11
  • Vertical: 3

2. The Contrast Text Shadow

In situations where the background is of the same shade like the headline, the result might be a headline that is hard to read. By adding a text shadow, so the heading gets a nice border that makes it easier to read.

How to do it?

  • Font Family: Montserrate
  • Color: #f801d6
  • Blur: 75
  • Horizontal: 0
  • Vertical: 0

3. The Glow text shadow

If you are into the 80's, then you are going to love this text shadow effect. Using the glow text shadow can be used with any bright color, and adds a retro neon effect to your headlines.

How to do it?

  • Font Family: Monoton
  • Color: #aa004f
  • Blur: 100
  • Horizontal: 0
  • Vertical: 38

4. The Distance text shadow

If you exaggerate and take the horizontal and vertical spacing to extreme, you can reach an interesting effect that will resemble a blurred reflection on a glass door. That's what it looks like to me, at least.

How to do it?

  • Font Family: Ubuntu Condensed
  • Color: #9fa2a8
  • Blur: 23
  • Horizontal: -54
  • Vertical: -76

5. Stroke / Hard text shadow

By not using any blur at all, you can create a stroke effect that will accentuate your headlines, retro style. This retro shade is rather popular right now, and it is also in tune with the hipster design trend.

How to do it?

  • Font Family: Lobster
  • Color: #09732c
  • Blur:0
  • Horizontal: 7
  • Vertical: 7

6. Dimensional Text Shadow

By making the shadow drop upwards, and condensing the heading with line height, we were able to create this 3 Dimensions text shadow effect that has a certain depth to it.

How to do it?

  • Font Family: Poppins
  • Color: #845757
  • Blur:0
  • Horizontal: 7
  • Vertical: 7
  • Line Height: 0.6

7. Straight Down Text Shadow

This text shadow gives the effect that the headline is raised above the screen. Use this shadow as a great addition for your hero headlines or your call to action sections, making the elevated appearance of the headline.

How to do it? 

  • Font Family: Montserrat
  • Color: #b2b2b2
  • Blur:5
  • Horizontal: 0
  • Vertical: 16

See it in action

We've created this short video showing our designer whipping up some of the text shadow effects. Check it out:

Conclusion

We've only touched upon the various uses of text shadows, and the ways in which they can help you design better looking pages on WordPress. 

Combined with other Elementor design features, like gradient colors, image overlays, background videos or shape dividers, and you can create even more elaborate text shadow designs.

I invite you to download the latest version of Elementor, and experiment with the text shadow feature. We'd love to get your page designs before and after adding the text shadow. I am sure the results will speak for themselves.

About the Author

Ben Pines

Ben Pines is Elementor's CMO. He has been in the online marketing industry for over 10 years, specializing in content marketing. WordPress has been Ben's platform of choice since the time when it was only used to blog.

7 Responses

  1. One of the best updates I’ve seen yet. Very cool effects, so simple and yet so many page builders ignore this simple css.

  2. Great addition. Also, this update fixed a few issues me and a few of the other devs in my office experienced with 1.6.3. It’s going to be a good day of devving.

Leave a Reply