Quick CSS trick : Make gradient Text Stroke.
Tags: css, html, beginners, webdev
Published: 2021-07-22 10:12:45

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.
{% youtube fXOjhxYogtM %}

#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.

```HTML
<h1 class="text">gradient</h1>
```

Now add basic styling.
```CSS
*{
    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
![Capture-2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8ro4zr8sjah5rnkcbby0.PNG)

You can see, we centered our Text element. right ? So, now style out text.
```CSS
.text{
    font-size: 150px;
    color: #eee;
    text-transform: capitalize;
}
```
######output
![Capture-3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7gk7ki6jx69qnchzc7qt.PNG)
 
> Notice, background color and text color both are same here.

Now, add some gradient background to the text.
```CSS
.text{
    /*previous styles*/
    background: linear-gradient(-45deg, #eeaa52, #e73c6f, #2394d5, #2af3b7);
    background-size: 200% 200%;
}
```

######output
![Capture-4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xtrxdj5khqb613s6eagw.PNG)

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

```CSS
.text{
    /*previous styles*/
    -webkit-background-clip: text;
}
```
 What is this property for, this will only show background color within text. Means like this.
![Capture-5](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j6xkh5p0kxmp5g9tdqwa.PNG)

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.

```CSS
.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
![Capture-6](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qemzepy4mdsoywbm8r87.PNG)

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](https://dev.to/kunaal438/css-position-everything-you-need-for-good-developer-pfh)
2. [CSS Media Query](https://dev.to/kunaal438/media-query-everything-you-need-for-responsive-design-b8g)
3. [CSS flex box](https://dev.to/kunaal438/display-flex-complete-guide-on-css-flex-box-2021-5bi2)

If you like, you can subscribe my youtube channel, and follow me on instagram. I create awesome web contents. [<a href="https://www.youtube.com/c/modern_web?sub_confirmation=1">Subscribe</a>], [<a href="https://www.instagram.com/modern_web_channel/">Instagram</a>]

Thanks For reading.