Key Elements

Share on facebook
Share on twitter
Share on linkedin

Key Elements

Tips & Tricks

How to Outline Text in Elementor

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.

😀.

One Response

Leave a Reply