Blogger Text

My Aim to Provide you quality contents, Tips & Tricks, Software, Microsoft Office, Graphic Editing (Adobe PhotoShop, After Affects, Illustrator, inDesign) Corel Draw, Corel Video Studio, Cyberlink PowerDirector, Power ActionCinema, Tutorials about Blogging and VU Assignments, Quizes & GDB Solutions and Much More... at regular Basis
                                     ***    Kindly Subscribe our Official YouTube Channel "INFOPALACESS OFFICIAL-Tuts: in this channel we upload Programming (C,C++,C# JAVA, PHP), Web Development, Graphics Editing and Microsoft Office Step by Step Tutorials from bigginer to Advance Level. We also provide free online courses at our YouTube Channel. ***   Graded Assignments/Quizes and GDB will start in Next Week. Solution ideas of All assignments, Quizes and GDB will be available here. If you have any problem regarding this then you can contact us.

Multiple Color Shades in HTML, Add Gradients in CSS

How to Add Multi-shade Color Background in 

HTML, Gradients Colors in CSS…
infopalacess Gradient image1

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.


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; 

infopalacess Gradient image2

#grad {
: 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;

infopalacess Gradient image3

#grad {
: linear-gradient(to right, red , yellow);

There are many others also other ways to display transition Like Diagonal (Assigning both Right and Top Corners), By Defining Angles, or Using Multiple Color Stops, Using Transparency or Repeating a Linear Gradient. 

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.


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.

infopalacess Gradient image4

#grad {
: radial-gradient(green, red, blue);

Radial Gradient - Differently Spaced Color Stops
The following example shows a radial gradient with differently spaced color stops:

#grad {
: radial-gradient(red 5%, yellow 15%, green 60%);

I am not going to cover all shapes I just suggest you that the pattern for all other gradients which are mentioned above is same as discussed above. You just need to define the shape and its size at the “shape size at their position”. 

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.

Post a Comment