CSS | Hue Background

Hue background is a concept of a new design methodology that focuses on clean and aesthetic looking UI. It gives the website a clean and aesthetic look. It is perfect for professional websites such as some product landing page or some organization’s home page. It also has an advanced version in which the color keeps changing and we will be looking at the advanced part only as you can make the basic one if you know how to make the advanced background.

Approach:The approach is to give a gradient background and making some borders to give it a shiny reflection kind of look. For advanced concepts, we will use keyframes to change the background color.

HTML Code:In this part, we have created a section.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport"
          content="width=device-width, 
                   initial-scale=1.0" />
    <title>HUE background</title>
 </head>
  <body>
    <section><h1>GeeksforGeeks</h1></section>
  </body>
</html>

chevron_right


CSS Code:For CSS, follow the below given steps.

  • Step 1: Apply a basic gradient background using linear-gradient
  • Step 2: Now apply animation property with a identifier named as animate
  • Step 3: Now use keyframes to rotate hue at any angle of your choice using hue-rotate.This will make the color change at each frame.We have divide the frames in three parts but you can choose to divide it according to your need
  • Step 4: Now use beforeselector to create left side border emerging from top.
  • Step 5: Now use afterselector to create right side border emerging from top.

Tip:The keyframes step is completely optional if you want basic background. The borders which give a reflective effect can be of different types. We have chosen to use the borders which are emerging from the top. You can change their emerging direction and almost everything according to your need and creativity.

filter_none

edit
close

play_arrow

link
brightness_4
code

section {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100vh;
       background: linear-gradient(90deg, #07f79b, #01442a);
       animation: animate 20s linear infinite;
     }
     @keyframes animate {
       0% {
         filter: hue-rotate(0deg);
       }
 
       50% {
         filter: hue-rotate(360deg);
       }
 
       100% {
         filter: hue-rotate(0deg);
       }
     }
 
     section::before {
       content: "";
       position: absolute;
       top: 0;
       left: 0;
       border-top: 100vh solid transparent;
       border-left: 100vh solid #fff;
       opacity: 0.1;
     }
 
     section::after {
       content: "";
       position: absolute;
       bottom: 0;
       right: 0;
       border-top: 100vh solid transparent;
       border-right: 100vh solid #fff;
       opacity: 0.1;
     }
 
     h1 {
       position: absolute;
       top: 50%;
       left: 40%;
       color: white;
       font: 40px;
     }

chevron_right


Complete Code:It is the combination of the above two sections of code.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0" />
    <title>HUE background</title>
    <style>
      section {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: linear-gradient(90deg, #07f79b, #01442a);
        animation: animate 20s linear infinite;
      }
      @keyframes animate {
        0% {
          filter: hue-rotate(0deg);
        }
  
        50% {
          filter: hue-rotate(360deg);
        }
  
        100% {
          filter: hue-rotate(0deg);
        }
      }
  
      section::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        border-top: 100vh solid transparent;
        border-left: 100vh solid #fff;
        opacity: 0.1;
      }
  
      section::after {
        content: "";
        position: absolute;
        bottom: 0;
        right: 0;
        border-top: 100vh solid transparent;
        border-right: 100vh solid #fff;
        opacity: 0.1;
      }
  
      h1 {
        position: absolute;
        top: 50%;
        left: 40%;
        color: white;
        font: 40px;
      }
    </style>
  </head>
  <body>
    <section><h1>GeeksforGeeks</h1></section>
  </body>
</html>

chevron_right


Output:




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.