How to Outline Text in Elementor

Outline text with a stroke often times gives your designs a really cool effect to make your designs come alive.

So we are going to go over just how easy it is to implement outline text in Elementor.

Let’s Begin

First thing we need to do is drag a heading widget on the page and choose a font that is big and fat.

I will be choosing Poppins with a font-weight of 800 and size at 71px.

Later we will need to change the color but for now we can leave it black.

Next we need to apply some CSS.

Go to the advanced tab and apply this in the custom css area.

selector {
     -webkit-text-stroke: 2px red;

You should now see a red stroke around your text.

Change the color of your text to white or what ever you like to match your site.

My Results

outline text

Browser compatibility

The only browser that does not support this CSS is …Explorer.

Every other browser has full support.

Browser compatibility

You can read more about it here.


Related Articles

How To Add A Reading Progression Bar To Your Elementor Site

In todays article we will be going over 2 ways to add a reading progression...

How to Make Attention Grabbing Buttons

Often times a button with just an hover effect isn’t enough to grab your visitors...

How To Trigger A Popup With a Menu Item

For this tutorial I will show you how to trigger a popup via a custom...

How To Hide And Show Widgets On Click

Earlier this week I was contacted by a user in the Elementor Facebook group who...

Leave a Reply

Your email address will not be published. Required fields are marked *

Powered by Elementor Pro

How happy are you with Key Elements?


Subscribe to get notified and receive a special invite.