Create Text Stroke Gradient Using HTML And CSS

Hey guys, welcome to the blog, in this blog we are going to see how to create a Text Stroke Gradient using Html and CSS only. Before that, we will see what this project is about.

This gradient text stroke is simply an effect we add to the text using some special gradients. Then we add the text stroke to it according to the width we want. Why are using it because it will make an engaging design and eye-catching features for your project.

So this is what we gonna create. Now let's begin with adding the source codes for our project and it starts with the html code.

Html Code Text Stroke Gradient

<link href='https://fonts.googleapis.com/css?family=Open+Sans:300,600,800' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Martel+Sans:200,400,800' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Biryani:200,300,400,600,800' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Exo+2:400,100' rel='stylesheet' type='text/css'>

<!-- CSS (WebKit) -->

<h1>Hello</h1>
<h2>Meet the</h2>
<h3>Judges</h3>

<!-- SVG -->
<svg width="100%" height="900" xmlns="http://www.w3.org/2000/svg">
 <defs>
  <linearGradient id="gradient" y1="0" y2="1">
   <stop stop-color="#EEF85B" offset="0"/>
   <stop stop-color="#09E5C3" offset="1"/>
  </linearGradient>
 </defs>
 <g>
  <text id="text" y="100" font-family="intro" font-size="120" font-weight="400" stroke-width="2" stroke="url(#gradient)" fill="#232d2d">54 HOURS</text>
 </g>

</svg>

Now the html code for the text stroke gradient has been added successfully. In this code, we first import the fonts using sources from outside links. Then the imported fonts will be applied o the texts.

After this, we added our texts to apply gradient stroke in it using the heading tags(h1,h2...). Also, the explanation code is given down below.

<link href='https://fonts.googleapis.com/css?family=Open+Sans:300,600,800' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Martel+Sans:200,400,800' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Biryani:200,300,400,600,800' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Exo+2:400,100' rel='stylesheet' type='text/css'>

<!-- CSS (WebKit) -->

<h1>Hello</h1>
<h2>Meet the</h2>
<h3>Judges</h3>

Now, after this, we are adding the stroke gradient properties to apply gradient strokes to the selected texts. With SVG we are adding the strokes and with defs tag, we can store the graphics objects that will be used later. For that purpose, we are opening the defs tag and inside it, we open another tag which is a linear gradient to start adding the gradient properties to the required texts.

In that linear-gradient, the first side of the text which is the left side is completed by fixing the color code for that side and with offset value to 0 on the specific part. Now we fixing another color code for another side which is right with an offset value of 1.
After that, the last text should appear in a different gradient for that we started fixing the text with font size, family, weight, and stroke color, and we are calling the linear gradient values to apply on this text by calling it with url(gradient) and closing the g tag.

G tag is nothing but used for grouping the SVG elements. The following explanation code is down below.

<svg width="100%" height="900" xmlns="http://www.w3.org/2000/svg">
 <defs>
  <linearGradient id="gradient" y1="0" y2="1">
   <stop stop-color="#EEF85B" offset="0"/>
   <stop stop-color="#09E5C3" offset="1"/>
  </linearGradient>
 </defs>
 <g>
  <text id="text" y="100" font-family="intro" font-size="120" font-weight="400" stroke-width="2" stroke="url(#gradient)" fill="#232d2d">54 HOURS</text>
 </g>

</svg>

Now the html code is completed successfully. So then we start styling our project by adding the css code. And the respective code is down below.

CSS Code Text Stroke Gradient

@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,600,800);
@import url(https://fonts.googleapis.com/css?family=Exo+2:400,100);
body {
  padding: 50px;
  background: #121D1D;
}

h1 {
  font-size: 100px;
  font-family: 'Intro', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  /* Warning: no fallback */

  background: -webkit-linear-gradient(-86deg, #EEF85B 5%, #7AEC8D 53%, #09E5C3 91%);
  -webkit-background-clip: text;
  -webkit-text-stroke: 4px transparent;
  color: #232d2d;

}

h2 {
  font-size: 64px;
  font-family: 'Exo 2', sans-serif;
  font-weight: 100;
  background: -webkit-linear-gradient(-86deg, #EEF85B 5%, #7AEC8D 53%, #09E5C3 91%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

h3 {
  font-family: Intro;
  font-size: 48px;
   background: -webkit-linear-gradient(-91deg, #EEF85B 5%, #7AEC8D 53%, #09E5C3 91%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 58px;

}

Now we added our css code successfully. In this code , first we linking the fonts from other source using import css property and in body section we fixing our padding and background values. The explanation of code is down.

@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,600,800);
@import url(https://fonts.googleapis.com/css?family=Exo+2:400,100);
body {
  padding: 50px;
  background: #121D1D;
}

Then, we started styling each text given in heading tags to make it attractive by adding the font- family, font size, font weight, etc..

After this, we are adding some advanced concepts of stroke properties, with stroke properties we just add the background with linear gradient properties(color code, degree rotation, values, etc..) and finally fix the text color in the stroke property. The respective code for the explanation is given below.

Note: when we are applying any stroke property to the text, make sure to start I with(-webkit) property.

h1 {
  font-size: 100px;
  font-family: 'Intro', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  /* Warning: no fallback */

  background: -webkit-linear-gradient(-86deg, #EEF85B 5%, #7AEC8D 53%, #09E5C3 91%);
  -webkit-background-clip: text;
  -webkit-text-stroke: 4px transparent;
  color: #232d2d;

}

h2 {
  font-size: 64px;
  font-family: 'Exo 2', sans-serif;
  font-weight: 100;
  background: -webkit-linear-gradient(-86deg, #EEF85B 5%, #7AEC8D 53%, #09E5C3 91%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

h3 {
  font-family: Intro;
  font-size: 48px;
   background: -webkit-linear-gradient(-91deg, #EEF85B 5%, #7AEC8D 53%, #09E5C3 91%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 58px;
}

Now we have completed our css code successfully. But make sure to add the html and css files in the same folder with a separate name. As we now come to the end of this project, before that, we just make sure to see our project preview in the output section down below.

Now we have successfully created our Gradient Text Stroke Project using html and css only. You can use this project for your personnel needs and the respective lines of code are given with the code pen link mentioned below.

If you find out this blog helpful? , then make sure to search code with random on google for front-end projects with source codes and make sure to follow the code with a random Instagram page.

Refer Code- Seth Jenks

Written By- Ragunathan S

Top comments (1)

Scott Ashcroft • Nov 13

Thank you for breaking down this complex topic! I've been struggling to understand this, and your post made it much clearer. Do you have any other resources or tutorials for taking this knowledge further? International Schools in Bangalore