Gradient Colors CSS Basic | Advance

Gradient Colors CSS Basic | Advance
Gradient Colors CSS Basic | Advance

Gradient Color refers to mixture of color uniformly with some patterns, which looks impressive and premium. You might have surf any professional or some graphics website which were using gradient patterns for designing the webpages and making the navigation easier for understanding the options. Gradient color make the web design alive. In this post we will learn about Gradient Color CSS Basic to Advance.

What is CSS ?

 CSS stands for Cascading Style Sheets, it’s one of the programming language which is used for decorating HTML (Hypertext Markup Language) codes. In any webpages HTML provides the structure and functions but CSS provide the outer layer like designs which make the navigation easier and impressive for the users.

◘ Basic of CSS Gradient Color

Linear Gradient Color CSS
Linear Gradient Color CSS
Here is the simple HTML code for Gradient Color. Let’s learn with this structure and try to understand the different aspect of gradient color combinations.
Below code is for linear gradient color
<!--https://theashubstore.blogspot.com-->
<!DOCTYPE html>
<html>
<head>
<style>
#gradlr {
  height: 100px;
  background-image: linear-gradient(red, black);
}
</style>
</head>
<body>
<div id="gradlr"></div>
</body>
</html>

 

◘ Type of Gradient Colors Combination in linear

↑ Bottom to top
 div {

    background: linear-gradient(to top, #ff0000 0%, #00000 100%);

}


↓ Top to bottom
div {
    background: linear-gradient(to bottom, #ff0000 0%, #00000 100%);
}
 

→ Left to right

div {
    background: linear-gradient(to right, #ff0000 0%, #00000 100%);
}
 
 

← Right to left

div {
    background: linear-gradient(to left, #ff0000 0%, #00000 100%);
}
 
 

↗ Bottom to top-right

div {
    background: linear-gradient(to top right, #ff0000 0%, #00000 100%);
}
 
 

↖ Bottom to top-left

div {
    background: linear-gradient(to top left, #ff0000 0%, #00000 100%);
}
 
 

↙ Top to bottom-left

div {

    background: linear-gradient(to bottom left, #ff0000 0%, #00000 100%);
}

 

↘ Top to bottom-left
div {

    background: linear-gradient(to bottom right, #ff0000 0%, #00000 100%);
}

Now let’s learn something apart from this like Curve, Circle etc Gradient Color Combinations.

Curve Color Gradient CSS
Curve Color Gradient CSS


◘ 
Curve

<!--https://theashubstore.blogspot.com-->
<!DOCTYPE html>
<html>
<head>
<style>
#gradlr {
  height: 200px;
  background-image: radial-gradient(at top left, transparent 67%, #fff 67.5%),
        linear-gradient(135deg, #51a595 0%, #3fcfa2 100%);
        }
</style>
</head>
<body>
<div id="gradlr"></div>
</body>
</html>

 

◘ Understanding this code

radial-gradient(at top left, transparent 67%, #fff 67.5%),
        linear-gradient(135deg, #51a595 0%, #3fcfa2 100%);
        }

at top left for the position of gradint color

135deg for the mixture of gradient color

 

◘ Circle

Change the property at top left to at center and you may change it as per need like at top left, at top right, at center right etc.

 

◘ How to implement Gradient Color in any HTML codes

   • Simply add background-image: in css code

   •After background-image: add your custom Gradient Color CSS

 

◘ Creating coding structure

All codes were modified as per needs, but if you wish to change it then you can while having the basics knowledge of Html, Css, otherwise use as it is.

Thanks for being here, stay connect with us.

Leave a Comment