How To Get Stroke Effect In Elementor Using Addons and CSS

Color scheme, typography, font, or text with stroke effects play an important part in enhancing a website design.

Unfortunately, at this time, the stroke effect in Elementor doesn’t work. However, an additional plugin or a bit of CSS is always there to help you.

So, let’s dig in and find out together how to get outline text or stroke effects in Elementor.

Contents Show

Stroke Effect Using Elemntor Addons:

Several elementor addons are available to get the outline or text stroke effect. Among them, happy addons is one of our favorite choices. With it, you don’t even need any special widget to get the text stroke effect.

For instance, Happy and Premium addons both offer this feature. However, one of them is more flexible and has more color gradings and masking effect options.

Don’t worry, we will discuss each one in detail.

Outline Text Effect with Happy Addons:

Here is the step-by-step guide to get the outline text effect in Elementor.

Initiate the process by installing and activating the happy add-on plugin. You can try either the free or pro version – either way, is fine.
Open the page with Elementor if you want to edit.
From the widget section, drag and drop the desired widget, such as heading, subheading, or text.
Edit your text and go to the style tab from the above-mentioned three tabs.
Next, perform your desired customizations, such as font, size, height, weight, or color, to match your brand and website design.
Here, at the bottom, you will also see the “text stroke” option; click on it and set your stroke effects, such as color and width.
Once done, click on save and update changes.

That’s it!

Outline Text Effect with Premium Addons:

Another helpful plugin to add stroke effect in elemntor is premium Addons. It actually works the same way as Happy Addons but is somehow limited to text enhancement options. However, premium add-ons also have both free and paid versions.

Install and activate the plugin.
Open the page with elementor.
Drag and drop the premium heading widget to your design.
Under the style tab, change the stroke option to yes.
Perform your necessary customization and hit the update button.

Stroke Text Effect with CSS

Using Plugins for such tiny tasks is not recommended by our side unless you are struggling a lot in applying a custom.

However, it’s also quite easy to get the stroke text effect in Elementor with CSS, and for this, you need Elementor Pro. The process remains the same with an additional CSS that we will also provide you here.

So, why to worry!!

Open the existing page with Elementor if you want to edit or create a new one.
Drag and drop the simple text effect to your layout.
Go to the style tab and apply some desired settings such as fonts, typography color, size, etc.
Once done, open the next tab named “advanced.”
Scroll down to find the custom CSS snippet.
Paste the below-mentioned code and hit the publish button to save changes.

:root{
    --myText : 'elementor';
    --textColor: #3d57fe;
    --textStroke: 3px;
    --anDuration: 4s;
}
selector{
    -webkit-text-stroke: var(--textStroke) var(--textColor);
    display: table;
    width: -moz-fit-content;
    width: -webkit-fit-content;
    width: fit-content;
    text-align: center;
    margin: 0 auto
}
selector .elementor-heading-title::before{
    content: var(--myText);
    color: var(--textColor);
    position: absolute;
    top: 0;
    width: 0%;
    height: 100%;
    text-align: left;
    overflow: hidden;
    white-space: nowrap;
    border-right: var(--textStroke) solid var(--textColor);
    -webkit-animation:animateX var(--anDuration) linear infinite;
            animation:animateX var(--anDuration) linear infinite;
}
@-webkit-keyframes animateX{
   0%,10%,100%{
        width:0%;
    }
   70%, 90%{
        width: 100%;
    }
}
@keyframes animateX{
   0%,10%,100%{
        width:0%;
    }
   70%, 90%{
        width: 100%;
    }
}

Remember, you can also change your text color, stroke, or duration from the code mentioned above. So, make sure to customize it as per your needs.

You can also watch this video.

How Do You Add a Stroke in Elementor?

While elements lack built-in stroke effects, you can use user-friendly solutions such as happy add-ons and premium add-on plugins. However, for deeper customization, you can wield the power of CSS.

Do write your experiences in the comment section for how you add stroke effect in Elementor and why.

Till Next!

Author
Recent Posts

Here I am

Zainab Hassan

Hi.. I am an SEO Expert from Last 4Years and Managing this website too. I'll try my best to provide the Top notch `content about COntent Writing SEO with the Help of the Blog TIPsoont.

I am Sure You'll learn Alot..

Here I am