Colorful Gradient Text Effect using only HTML & CSS

CodingNepal — Thu, 10 Sep 2020 08:21:00 +0000

Hello readers, Today in this blog you’ll learn how to create a Simple Colorful Gradient Text Effect using only HTML & CSS. Earlier I have shared a blog on how to create a Text Glitch Effect and now it’s time to create a rainbow gradient text effect. Generally, I used CSS linear-gradient function to mix two or more colors in the text.

The linear-gradient() CSS function creates an image consisting of a continuous transition between two or more colors on a straight line. In our program [Gradient Text Effect], there is a text labeled as “GRADIENT” on the webpage and inside the text, a gradient color flow continuously from the right side to the left side.

If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program [Gradient Text Effect].

Video Tutorial of Rainbow Gradient Text Effect

In the video, you have seen an Awesome Gradient Text Effect where linear-gradient colors flow continuously inside the text. I used two CSS properties to put the background color inside the text one is -webkit-background-clip and another one is -webkit-text-fill-color, and to animate or flow background color, I used CSS animation and @keyframes properties as you have seen in the video.

You can also put an image inside the text, to put the image inside the text you have to provide the image URL inside the background property i.e. background: url(“your image url here”). Simply, we call this effect clip an image to text.

If you like this Gradient Text Effect and want to get source codes of this program. You can easily get the codes of this program from below two boxes or you can also download code files – HTML & CSS from the download link which is given below. You can use this text effect in your project according to your choice.

Colorful Gradient Text Effect [Source Codes]

To create this program [Colorful Gradient Text Effect]. First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file.

First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.




  
    
    Gradient Text Effect | CodingLab
    
  
  
    
Gradient

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
html,body{
  display: grid;
  height: 100%;
  place-items: center;
  /* background: #000; */
}
.text{
  font-size: 150px;
  font-weight: 800;
  outline: none;
  text-transform: uppercase;
  background: linear-gradient(135deg, #5335cf 0%, #de005e 25%, #f66e48 50%, #de005e 75%, #5335cf 100%);
  background-size: 400%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; 
  animation: animate 10s linear infinite;
}
@keyframes animate {
  to{
    background-position: 400%;
  }
}

That’s all, now you’ve successfully created a Colorful Gradient Text Effect using only HTML & CSS. If your code doesn’t work or you’ve faced any error/problem then please comment down or contact us from the contact page.

Text Glitch Effect in HTML & CSS

CodingNepal — Fri, 08 May 2020 11:50:00 +0000

Hello readers, Today in this blog you’ll learn how to create a Glitch Effect in Text using only HTML & CSS. Previously I have shared a Buttons with Cool Shining Hover Effect using HTML CSS, now it’s time to create a Text Glitch Effect in HTML & CSS.

I am sure that, You already know what is glitch effect. Mostly these types of glitch effects used in graphic designing, but some websites also use this effect. This is a pretty good effect to place on the website’s banner.

As you can see in the image, this is a glitch effect in the text. This is a pure CSS program. The whole concept is about that move different colors of text together. When 2 or 3 colors text will move randomly, then the glitch effect appears.If you’re feeling difficulty understanding what I am saying. You can watch a full video tutorial on this program (Text Glitch Effect).

Video Tutorial of CSS Text Glitch Effect

If you like this program (Text Glitch Effect) and want to get codes of this. You can easily get the source codes of this program. To get the source codes you just need to scroll down.

Text Glitch Effect in HTML & CSS [Source Codes]

To create this program (Text Glitch Effect). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file. First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.




   
      
      Text Glitch Effect | CodingNepal
      
   
   
      
         
            Text Glitch

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  font-family: 'Poppins', sans-serif;
}
body, html {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: black;
}
.content{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.content .text{
  position: relative;
  color: #fff;
  font-weight: 700;
  font-size: 45px;
  transform: scale(2);
  padding: 30px;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.content .text:before,
.content .text:after {
  padding: 30px;
  color: white;
  content: attr(data-text);
  position: absolute;
  width: 100%;
  height: 100%;
  background: black;
  overflow: hidden;
  top: 0;
}
.content .text:before{
  left: 3px;
  text-shadow: -2px 0 red;
  animation: glitch-1 2s linear infinite reverse;
}
.content .text:after{
  left: -3px;
  text-shadow: -2px 0 blue;
  animation: glitch-2 2s linear infinite reverse;
}
@keyframes glitch-1 {
  0% {
    clip: rect(132px, auto, 101px, 30px);
  }
  5% {
    clip: rect(17px, auto, 94px, 30px);
  }
  10% {
    clip: rect(40px, auto, 66px, 30px);
  }
  15% {
    clip: rect(87px, auto, 82px, 30px);
  }
  20% {
    clip: rect(137px, auto, 61px, 30px);
  }
  25% {
    clip: rect(34px, auto, 14px, 30px);
  }
  30% {
    clip: rect(133px, auto, 74px, 30px);
  }
  35% {
    clip: rect(76px, auto, 107px, 30px);
  }
  40% {
    clip: rect(59px, auto, 130px, 30px);
  }
  45% {
    clip: rect(29px, auto, 84px, 30px);
  }
  50% {
    clip: rect(22px, auto, 67px, 30px);
  }
  55% {
    clip: rect(67px, auto, 62px, 30px);
  }
  60% {
    clip: rect(10px, auto, 105px, 30px);
  }
  65% {
    clip: rect(78px, auto, 115px, 30px);
  }
  70% {
    clip: rect(105px, auto, 13px, 30px);
  }
  75% {
    clip: rect(15px, auto, 75px, 30px);
  }
  80% {
    clip: rect(66px, auto, 39px, 30px);
  }
  85% {
    clip: rect(133px, auto, 73px, 30px);
  }
  90% {
    clip: rect(36px, auto, 128px, 30px);
  }
  95% {
    clip: rect(68px, auto, 103px, 30px);
  }
  100% {
    clip: rect(14px, auto, 100px, 30px);
  }
}
@keyframes glitch-2 {
  0% {
    clip: rect(129px, auto, 36px, 30px);
  }
  5% {
    clip: rect(36px, auto, 4px, 30px);
  }
  10% {
    clip: rect(85px, auto, 66px, 30px);
  }
  15% {
    clip: rect(91px, auto, 91px, 30px);
  }
  20% {
    clip: rect(148px, auto, 138px, 30px);
  }
  25% {
    clip: rect(38px, auto, 122px, 30px);
  }
  30% {
    clip: rect(69px, auto, 54px, 30px);
  }
  35% {
    clip: rect(98px, auto, 71px, 30px);
  }
  40% {
    clip: rect(146px, auto, 34px, 30px);
  }
  45% {
    clip: rect(134px, auto, 43px, 30px);
  }
  50% {
    clip: rect(102px, auto, 80px, 30px);
  }
  55% {
    clip: rect(119px, auto, 44px, 30px);
  }
  60% {
    clip: rect(106px, auto, 99px, 30px);
  }
  65% {
    clip: rect(141px, auto, 74px, 30px);
  }
  70% {
    clip: rect(20px, auto, 78px, 30px);
  }
  75% {
    clip: rect(133px, auto, 79px, 30px);
  }
  80% {
    clip: rect(78px, auto, 52px, 30px);
  }
  85% {
    clip: rect(35px, auto, 39px, 30px);
  }
  90% {
    clip: rect(67px, auto, 70px, 30px);
  }
  95% {
    clip: rect(71px, auto, 103px, 30px);
  }
  100% {
    clip: rect(83px, auto, 40px, 30px);
  }
}

That’s all, now you’ve successfully created a Text Glitch Effect in HTML & CSS. If your code does not work or you’ve faced any error/problem then please comment down or contact us from the contact page.

CSS Text Effect – CodingNepal