Blog, HTML & CSS

How to Create a Gradient Text Stroke Effect Using HTML & CSS

Posted by author-avatar
On April 9, 2025
0 comments

If you’re looking to add some flair to your website’s typography, you’re in the right place. In this post, we’ll show you how to create a stunning text stroke effect with a gradient using just HTML and CSS. This is a simple yet impactful design trick that can elevate your text and make it pop on any webpage. Whether you’re a beginner or looking to polish your CSS skills, we’ve got you covered. Let’s dive in and get creative with some code!

HTML Code

Let’s kick things off with the HTML. Below is the complete structure you’ll need:

<!DOCTYPE html>
<html>
    <head>
        <title>Text Stroke with Gradient Effect</title>
        <link href="style.css" rel="stylesheet" />
    </head>
    <body>
        <h1 class="heading">RS Digitals</h1>
    </body>
</html>

Breaking It Down:

  • <!DOCTYPE html> tells the browser that this is an HTML5 document.
  • The <html> tag wraps the entire content of the webpage.
  • Inside the <head>, we have the <title>, which sets the name of the tab or browser window.
  • The <link> tag connects an external CSS file called style.css where we’ll write all the styling magic.
  • In the <body>, we’ve added an <h1> element with the class heading. This is the text we’re going to style with a gradient stroke effect.

Now that we’ve set up the structure, let’s move on to the fun part—styling it with CSS!

CSS Code

Now that we’ve got the HTML structure in place, it’s time to bring the magic with CSS! Here’s the complete CSS code we’ll use to create a beautiful gradient-stroked text effect:

@import url('https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@100..900&display=swap');

body {
    background: #1d1e22;
}

.heading {
    text-align: center;
    padding: 140px 0px;
    font-size: 9vw;
    color: #1d1e22;
    background-clip: text;
    background-image: linear-gradient(to right, #ff7e5f, #feb47b, #ffdd00);
    -webkit-text-stroke-color: transparent;
    -webkit-text-stroke-width: 5px;
    letter-spacing: 1px;
    font-family: "Lexend Deca", sans-serif;
}

Let’s break it down:

  • Font Import: We’re importing the Lexend Deca font from Google Fonts to give our heading a modern and clean look.
  • body: We’re setting the background of the entire page to a dark shade (#1d1e22) to make the gradient text pop.
  • .heading: This is where the real styling happens:
    • text-align: center centers the heading horizontally.
    • padding: 140px 0px adds vertical spacing to position the text nicely in the viewport.
    • font-size: 9vw makes the text responsive—it will scale based on the width of the screen.
    • color: #1d1e22 is the base color of the text, which will be masked by the background clip.
    • background-image: linear-gradient(...) creates the gradient that we want to apply to the stroke.
    • background-clip: text and -webkit-background-clip: text (you should add the webkit version for broader browser support) allow the background gradient to appear through the text.
    • -webkit-text-stroke-width: 5px and -webkit-text-stroke-color: transparent create a transparent stroke that lets the gradient shine through.
    • letter-spacing: 1px gives a bit of breathing space between each character.
    • font-family applies the stylish Lexend Deca font to the heading.
Pro tip: Don’t forget to add -webkit-background-clip: text; to ensure the gradient appears correctly in most browsers like Chrome and Safari.

Up next, we’ll see the final output and maybe even play around with a few customization ideas. Stay with me—this is where it gets visually satisfying!

See It Live

Want to see the magic in action? Check out the live preview below! You can interact with the code, tweak the styles, and see real-time changes directly in the embedded CodePen. It’s a great way to experiment and get a feel for how the gradient text stroke effect works.

Go ahead, play around with it and make it your own!

See the Pen Text Store with Gradient by Rohail Ali (@Rohail1123) on CodePen.

Final Thoughts

And that’s a wrap! In this tutorial, we walked through how to create an eye-catching text stroke effect with a gradient using just HTML and CSS. With a clean HTML structure and some clever use of CSS properties like background-clip, text-stroke, and linear gradients, you can instantly elevate the look of your headings or hero text.

It’s a simple yet powerful trick to make your text stand out—and the best part? No JavaScript needed!

Feel free to experiment with different gradient colors, fonts, or stroke widths to match your site’s style. If you found this helpful, don’t forget to share it or drop a comment. Happy coding!

Back to list
Older CSS Trick: Grainy Text Effect Without JavaScript

Related Posts