How to Create Text Stroke Slide Animation in Elementor

Updated: May 25, 2022

Elementor offers a number of features you can maximize to make your website more alive. From entrance and exit animation effects, scrolling effects to mouse effects. If these features are not enough for you, you can use custom CSS to add a certain effect that is not available in Elementor by deafult. In this post, we will show you how to create a text stroke slide animation effect using custom CSS.

It’s true that CSS knowledge is not required to create a website with Elementor, but if you have CSS knowledge, it will be a massive bonus as you will be able to achieve more things in terms of styling. To give you an overview of what will create in this post, take a look at the following screencast.

Elementor has no default options to create a text effect like the one above. You can only achieve it via custom CSS.

How to create a text effect like the one above?

First off, create a new page (or edit an existing one) and edit it with Elementor. New to Elementor? You can read our previous article to learn how to use Elementor. On the Elementor editor, drag the Heading widget to the canvas area.

Replace the default text. Once done, go to the Style tab to set the text color and typography settings. For the best result, you can use a thick font. In this example, we use Poppins. This font is already available in Elementor by default so that you don’t need to install it yourself. Here are the typography settings we use in this example.

  • Font family: Poppins
  • Font size: 90 px
  • Font weight: 900
  • Text color: Blue

Once done styling up the text, go to the Advanced tab and open the Custom CSS block and paste the following CSS snippet.

The snippet:

    --myText : 'elementor';
    --textColor: #3d57fe;
    --textStroke: 3px;
    --anDuration: 4s;
    -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{
   70%, 90%{
        width: 100%;
@keyframes animateX{
   70%, 90%{
        width: 100%;

One thing to note: On the myText variable, make sure to use the same value (text) as the text of the Heading widget. To change the text color (the slide text), you can change the value (hex code) of the textColor variable. To change the stroke size, you can change the value of the textStroke variable. To change the slide speed, you can change the value of the anDuration variable.

Once done, you can set the background of the column (or section) where the Heading widget belongs to, to fit the text color.

The Bottom Line

Heading is one of the native widgets offered by Elementor. The widget is useful to add a title of page or section to affirm what is the page/section about. You have options to set the typography settings like font family, font size, font style, to text color. Also, there are options to apply some animation effects. If you have CSS knowledge, the options to style up the Heading widget are limitless as Elementor supports custom CSS. Please note that the ability to add custom CSS is only available on Elementor Pro, so be sure you have upgraded your Elementor to the pro version in case you haven’t done so (read: Elementor Free vs Pro).

This page may contain affiliate links, which help support WP Pagebuilders. Learn more

Leave a Comment

Pin It on Pinterest

Thanks for commenting

Help us grow by sharing this post with your friends!

Join 500+ WordPress users receiving tips and insights on creating on WordPress with Elementor.


How long have you been using WordPress? If you are an old WordPress user, then you have been a witness how WordPress has evolved massively. It has gone from a merely blogging tool into a comprehensive website builder. You can now use WordPress to create any type of website. From e-commerce website, LMS, listing website, membership website, to social media website.

Do you know what’s more interesting?

You can create your website with WordPress without touching a single line of code. At WP Pagebuilders, we write a lot about how to get the most out of WordPress in the no-code era. Subscribe and be first to know our newest content.