Notification texts go here. Contact Us Buy Now!

Get your blog ready With details you won't find anywhere.

color effect for blogger post title

Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated

Today I will share with you the color transition effect for the title. Just add a little css to have a beautiful color effect for the blog. Let's get started now

How to prepare?

To create the effect we need to use CSS. Here I am working on CSS3 which is supported in most browsers. That way you don't have to worry about compatibility issues anymore.


Step 1: Go to Blogger, go to the Appearance section and click Edit HTML

Step 2: Scroll to the bottom of the blog CSS archive

Step 3: Insert this code:

/* Title post */h1{line-height:42px;font-size:30px;text-align:left;background:linear-gradient(60deg,#FC5C7D  0%,#6A82FB 25%,#FC5C7D 50%,#6A82FB 75%,#FC5C7D 100%);color:#fff;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:10s ChuyenDongMau linear infinite}@keyframes ChuyenDongMau{100%{background-position:100vw 0}} 

Step 4: Save and see the results!

Color effect CSS analysis

First, I used CSS selectors to mark all the h1 tags . If you do not want to affect other functional h1 tags, you can replace it with h1 .post-title (ie select the post-title classes included in the h1 tag ).

The main components

  • background:linear-gradient(...); Create a gradient effect for the background
  • -webkit-background-clip:text; Convert the background color gradient to the text color range. Without this line the browser will result as a background containing a gradient.
  • animation:10s Linear infinite Marks the motion effect for the background color gradient.
  • @keyframes ChuyenDongMau{...} Create a color transition effect with the target of ChuyenDongMau that we called above.

So it's done. If you have any questions, please leave them in the comments section

Good luck!

Read Also

Getting Info...

Post a Comment

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.