Categories
CSS HTML Web development

CSS Gradient Stroke Effect

Learn how to create the text with the gradient stroke effect.


To create the CSS Text with Gradient Stroke follow the steps below and watch the video tutorial.

CSS Gradient Stroke

Demo:

*to see the text on the website click here.

Step1.

Add HTML

<div class="gradient-stroke">GRADIENT STROKE</div>

Step2.

Add CSS

Import the font:

Font source: Google Fonts

To read how to import the font in CSS click here.

@import url('https://fonts.googleapis.com/css2?family=Righteous&display=swap');

Set the colour and the position of the background and elements:

body {
  height:100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: black;
}

Style the text:

.gradient-stroke {
  font-size:80px;
  font-family: 'Righteous', cursive;
  background-image: linear-gradient( 69.7deg,  rgba(244,37,243,1) 1.4%, rgba(244,87,1,1) 36.2%, rgba(255,204,37,1) 72.2%, rgba(20,196,6,1) 113%);
  -webkit-background-clip: text;
  -webkit-text-stroke-color: transparent;
  -webkit-text-stroke-width: 10px;
  padding: 10px;
  letter-spacing:5px;
  filter: brightness(1.3);
}

Watch also the video tutorial:

Enjoy coding!

Hey, here’s something that might interest you:

How to add stroke/ outline to the text in CSS?

How to create a transparent text with stroke in CSS?

SVG Stroke & Fill Animation