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>

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;
}

Output

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

.text{
    font-size: 150px;
    color: #eee;
    text-transform: capitalize;
}

output

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%;
}

output

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

.text{
    /*previous styles*/
    -webkit-background-clip: text;
}

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

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;
}

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