This content originally appeared on DEV Community and was authored by Modern Web
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
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
If you like, you can subscribe my youtube channel, and follow me on instagram. I create awesome web contents. [Subscribe], [Instagram]
Thanks For reading.
This content originally appeared on DEV Community and was authored by Modern Web
Modern Web | Sciencx (2021-07-22T10:12:45+00:00) Quick CSS trick : Make gradient Text Stroke.. Retrieved from https://www.scien.cx/2021/07/22/quick-css-trick-make-gradient-text-stroke/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.