DEV Community

Cover image for Quick CSS trick : Make gradient Text Stroke.
Modern Web
Modern Web

Posted on

Quick CSS trick : Make gradient Text Stroke.

Hello, welcome. Today we'll see a quick CSS trick.

Gradient Text Stroke

Wonder, how to make a gradient text stroke ? Let's see how you can make one very easily.

Video Tutorial

If you want, you can watch quick tutorial video on youtube.

Let's start

So, first thing we need a text, to start with. So, after writing basic HTML structure. Create h1 element inside body or you can create any text element.

<h1 class="text">gradient</h1>
Enter fullscreen mode Exit fullscreen mode

Now add basic styling.

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'roboto', sans-serif;
    background-color: #eee;
}
Enter fullscreen mode Exit fullscreen mode
Output

Capture-2

You can see, we centered our Text element. right ? So, now style out text.

.text{
    font-size: 150px;
    color: #eee;
    text-transform: capitalize;
}
Enter fullscreen mode Exit fullscreen mode
output

Capture-3

Notice, background color and text color both are same here.

Now, add some gradient background to the text.

.text{
    /*previous styles*/
    background: linear-gradient(-45deg, #eeaa52, #e73c6f, #2394d5, #2af3b7);
    background-size: 200% 200%;
}
Enter fullscreen mode Exit fullscreen mode
output

Capture-4

But, we don't want background color, right ? so for that use this property.

.text{
    /*previous styles*/
    -webkit-background-clip: text;
}
Enter fullscreen mode Exit fullscreen mode

What is this property for, this will only show background color within text. Means like this.
Capture-5

But this will only work if, text color is set to transparent. But in our case. Our text color is not transparent, because of that we'll not be able to see any gradient color. I hope it makes sense.

Now the last step, use -webkit-text-stroke property.

.text{
    /*previous styles*/
    -webkit-text-stroke: 8px transparent;
}
Enter fullscreen mode Exit fullscreen mode

here you can give any stroke color after 8px (stroke width) but by giving transparent, you are making space within the text, so our background gradient should be visible.

output

Capture-6

So, it's done. I hope you understood each and everything. If you have doubt or I missed some point let me know in the comments.

Articles you may found Useful

  1. CSS Positions
  2. CSS Media Query
  3. CSS flex box

If you like, you can subscribe my youtube channel, and follow me on instagram. I create awesome web contents. [Subscribe], [Instagram]

Thanks For reading.

Top comments (1)

Collapse
 
violet profile image
Elena

Basically you add a linear gradient on the background and then clip it to the text and make sure the text color is transparent. But I wouldn't use -webkit-text-stroke since it's not a standard css property, although it is indeed supported by all modern browsers.