CSS Attractive gradient background animation on clicking.

Photo by Branko Stancevic on Unsplash

Using the modern gradient trend of 2020.

With the help of HTML CSS and jquery for the result, you need to click on A B C D block for different gradient backgrounds with the animation effect of text and border slide.

As per the new trend Modern gradient background, the CSS part is most important with the color combinations.

In this demo, I am trying to create the creative gradient effect background with a different combination of a linear gradient.

Step 1.

Use below HTML code for divs and sections

code for the front end.

step 2.

CSS code for the gradient background.

Syntax : background-image: linear-gradient(direction, color-stop1, color-stop2, …);

CSS code for gradient background.

Step 3.

Add the below jQuery code to the HTML page for the animation.

JQuery code for animation.

Final output.

Jquery animation with CSS.

Thank you.