Create an animated gradient background on hover avec CSS

Whether it's to highlight a part of your website or a quote as in this example, generating and adding a gradient to the background can give your website a very modern touch. Find out in this article how to do it easily!

Louis-Nicolas Leuillet

Updated on December 9, 2024

Whether it's to highlight a part of your website or a quote like in this example, generating and adding a gradient to the background can give a very modern touch to your website. Let's discover in this article how to achieve this easily!

Step 1

The HTML code.

HTML

<div class="box">
    <p>Most people find the concept
   of programming obvious, but the realization
   impossible.</p>
    <h2>Alan Jay Perlis</h2>
</div>

<div class="background"></div>

Step 2

Let's style the box (.box).

CSS

.box {
  position: relative;
  width: 300px;
  height: 300px;
  background: white;
  transition: all 0.5s;
  z-index: 2;
  padding: 30px;
}

Step 3

Add the opening quotation mark.

CSS

.box::before {
  content: '\201C';
  position: absolute;
  top: -20px;
  left: 5px;
  width: 100%;
  height: 100%;
  font-size: 120px;
  opacity: 0.2;
}

The \201C code allows us to display an opening quotation mark.

Step 4

Now, let's add the closing quotation mark.

CSS

.box::after {
  content: '\201D';
  position: absolute;
  bottom: 0;
  right: 5px;
  font-size: 120px;
  opacity: 0.2;
}

Step 5

Let's style the text and the title.

CSS

.box p {
  margin: 0;
  padding: 10px;
  font-size: 1.2rem;
}

.box h2 {
  position: absolute;
  margin: 0;
  padding: 0;
  bottom: 30px;
  right: 30px;
  font-size: 1.5rem;
}

Step 6

Let's animate the box style on hover with the mouse.

CSS

.box:hover {
  color: #f2f2f2;
  box-shadow: 20px 50px 100px rgba(0, 0, 0, 0.5);
}

Here, we change the text color and the author's name when we hover the cursor over the box.

Step 7

Let's now style the background.

CSS

.background {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  opacity: 0;
  transition: all 0.5s;
  width: 100%;
  height: 100%;
}

Step 8

Let's finish this effect with the design of the menu.

CSS

.box:hover, .box:hover ~ .background {
  opacity: 1;
  background: #e2a9e5;
  background: -moz-linear-gradient(-45deg, 
  #e2a9e5 15%, #2b94e5 100%);
  background: -webkit-linear-gradient(-45deg, 
  #e2a9e5 15%,#2b94e5 100%);
  background: linear-gradient(-45deg, #e2a9e5
  15%,#2b94e5 100%);
}

Here, we manage the display of the text with the color change when the cursor hovers over the box.
We will also manage the display of the background, creating this gradient effect between the colors.

Category: Development