How to Add Stroke Outline in Elementor & Elementor Pro

Introduction

Stroke Outline in Elementor is a powerful and visually appealing design effect that can make your website’s typography stand out. Whether you’re working on a bold homepage header or an eye-catching call-to-action, using stroke-outlined text can help create emphasis and elevate the overall design of your site.

In this guide, you’ll learn everything you need to know about how to create Stroke Outline in Elementor, using both the free version and Elementor Pro. We’ll cover step-by-step methods, customization tips, and design best practices to help you implement this effect like a pro.

What is Stroke Outline in Elementor?

Stroke Outline in Elementor refers to a text styling effect where the inside of the text is transparent or filled, and the edges (outline) of each letter are highlighted with a visible color. This creates a hollow, outlined text appearance — often used for bold headings or modern design elements.

Why Use Stroke Outline in Elementor?

• Makes text stand out over images or gradients
• Adds a modern and stylish design effect
• Useful for hero sections, banners, or call-to-action headers
• Can be combined with animations or hover effects

Add Text Stroke in Elementor Free

1. Assign a Custom Class to Your Text Widget

1. Edit your page with Elementor.
   
2. Select the Text Editor or Heading widget.
3. Go to the Advanced tab.
   
4. In the CSS Classes field, add a class name like:
   text-stroke

2. Add Custom CSS Using the “Custom HTML” Widget

Since you can’t directly add custom CSS to widgets in Elementor Free, use the HTML widget to inject your styles.

1. Drag an HTML widget to anywhere on the page (usually the bottom).
   
2. Paste this code inside:

Add Text Stroke in Elementor Pro

1.Open Your Elementor Page

  Edit the page or section where you want the outlined text.

2.Add a Heading or Text Widget

Drag in a Heading or Text Editor widget from the Elementor panel.

3.Style the Text (Optional)   

Go to the Style tab and adjust font size, weight, and alignment.

Choose a bold font — outlines show best on thicker text.

4.Go to Advanced > Custom CSS (Requires Elementor Pro)

Scroll to the “Advanced” tab of the widget.
Open the Custom CSS section and paste the following:

You can adjust the stroke width (e.g., 2px) and color (#000000) to match your design.

5.Optional: Add a Background Fill or Hover Effect
     

For cool effects, you can add a background fill on hover or animate the stroke with motion effects

Stroke (Outline) Text in Elementor Free vs Elementor Pro

Tips for Better Results

• Use bold fonts – Thin fonts may not show the stroke clearly.
• Test on mobile – Stroke text may behave differently on smaller screens.
• Combine with shadows – Add text-shadow for even more depth.

Optional Enhancements

• Add Hover Effects: Make the fill color appear on hover.
• Text Shadow: Combine stroke with a subtle shadow for more depth.
• Animations: Use Elementor’s built-in motion effects to animate your outlined text.

Uses of Stroke Outline Text in Elementor

Stroke Outline Text in Elementor isn’t just a trendy design trick — it’s a powerful visual tool that can help your content stand out and make a lasting impression. Here are some of the most effective ways to use it:

1. Hero Section Headlines

Use stroke-outlined text as the main heading on your homepage or landing page to instantly capture attention. It creates a bold and modern look that’s perfect over image or video backgrounds.

2. Call-to-Action (CTA) Areas

Make your CTAs more eye-catching by applying a stroke outline to words like “Subscribe,” “Get Started,” or “Join Now.” It adds contrast and urgency without adding clutter.

3. Product or Service Highlights

Highlight key features, services, or limited-time offers using outlined text to draw attention without overpowering the rest of the design.

4. Event Announcements or Launch Dates

For webinars, product launches, or sales, use stroke outline text to make the date or event title pop out from the rest of the page.

5. Background Text Effects

Use large, lightly stroked words in the background of a section as a subtle design layer, giving your layout depth and texture without distracting the user.

Conclusion:

Stroke Outline in Elementor is a stylish effect that’s possible with both the free and Pro versions — but for flexibility, ease, and professional results, Elementor Pro is the better choice. Creating a Stroke Outline in Elementor is a powerful way to enhance your website’s typography and design. Whether you’re using the free version or Elementor Pro, you can achieve this striking effect — but the methods and flexibility vary.

Creative Typography Styles Using Text Stroke

Text stroke is a cornerstone of modern brutalist and high-impact hero typography. Use these popular design patterns:

1. Transparent “Ghost” Heading Typography

Combine a transparent font fill with a crisp outline to create subtle, massive watermark headlines:

• In Style → Text Color, select the color picker and drag the opacity slider to 0 (completely transparent).
• In Style → Text Stroke, set width to 2px and color to your primary accent hue.
• Position this behind your main content for dramatic editorial depth.

2. Dual-Layer Overlapping Text with Z-Index

Place an image or product cutout between two identical heading layers: the bottom layer filled with solid color, and the top layer displaying only the text stroke. This creates a striking 3D pop-out effect where the product appears to weave through the typography.

Text Stroke CSS Properties & Browser Compatibility

Looking for creative front-end design, bespoke typography systems, or custom WordPress development? Discover our WordPress agency services at CV World.

Frequently Asked Questions