How to Add Multi-shade Color Background in
HTML, Gradients Colors in CSS…
Sometimes we need simplicity but sometimes we have some designs to express our feelings or need to understand some details for this purpose we have to style our posts.
According to my opinion CSS plays an important role in Web Development but we can’t use CSS without HTML.
HTML is a simple language for Web Development but if we need some style then we use CSS. In connection with this here, I am going to define Gradient Colors in CSS.
Gradients COLORs in CSS.
When we need to display smooth and neat transitions between two or more colors then we use Gradients colors. In HTML we can’t properly use gradients color but with CSS It can be done easily.
Types of Gradient in CSS
There are mainly two types of Gradients.
1- Linear Gradient (right side Colors, Left Side Colors, repeated Steps Colors)
2- Radial Gradient (These are defined by their center in Circle)
Here I am going to explain that how we can use these gradients in HTML with CSS to make our Website Posts more beautiful.
1 Linear Gradient.
To create a linear Gradient, we must define at least two colors stops. Colors stops are colors which we want to render smooth transitions among. These are called Starting Point and Direction or Angle along with gradient effect.
Syntax
Background-image: linear-gradient(direction, color1, color2, ….);
|
a. Linear Gradient – Top to Bottom (Default)
The following example show a linear gradient that start at the top, It starts Green, transition to Yellow;
Example
#grad {
background-image: linear-gradient(green, yellow);
}
background-image: linear-gradient(green, yellow);
}
a. Linear Gradient - Left to Right
The following Linear Gradient – Left to Right
The following example show a linear gradient that start from left, It starts Red, transition to Yellow;
Example
#grad {
background-image: linear-gradient(to right, red , yellow);
}
background-image: linear-gradient(to right, red , yellow);
}
Radial Gradients in CSS
A Radial Gradient is defined by its center as stated above.
To create radial, we must also define at least two-color stops.
Syntax
Background-image: radial-gradient (shape size at their position, color1, color2, ….);
|
Default Radial Gradient.
The following example shows a radial gradient with spaced color stops which is default radial gradient.
Example
#grad {
background-image: radial-gradient(green, red, blue);
}
background-image: radial-gradient(green, red, blue);
}
Radial Gradient - Differently Spaced Color Stops
Example
#grad {
background-image: radial-gradient(red 5%, yellow 15%, green 60%);
}
background-image: radial-gradient(red 5%, yellow 15%, green 60%);
}
If you still need any help or have any confusion then please let us know in comments below. Also Subscribe our YouTube Channel to get regular updates and video step by step tutorials regarding, Microsoft Office, Web Development, Graphic Designing and much More.
0 Comments