CSS Gradient Text Effect

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

Step1.

Add HTML

<div class="text">Type your text here</div>

Step2.

Add CSS

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

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

Style your text:

.text {
  position: relative;
  text-align: center;
  font-size:100px;
  font-family: arial;
  font-weight: 900;
  background-image: linear-gradient( 109.6deg,  rgba(48,207,208,1) 11.2%, rgba(51,8,103,1) 92.5% );
  background-clip: text;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  -moz-text-fill-color: transparent;
  -webkit-text-fill-color: transparent;
  filter: brightness(1.85);  
}

To see the live output of the code go to lenastanley.com.

Watch also the video tutorial:

Enjoy coding!

Share this: