Learn How To Create CSS Gradient for Background Color

How to Make Gradient Colors For Background

buayaberdiri.blogspot.com - If you want to combine multiple colors for the background and want them to match the CSS supported color styles, then you can do that.

Gradient color is one of the materials that you can learn to make color gradations or blends of several colors according to the style support in CSS.

In CSS Color Gradients there are two types:

1. Linear Gradients
2. Radial Gradients

1.Adding Color Linear Gradients to the Background

Linear Gradient is a combination of more than one color with a style starting from top to bottom or bottom to top or right to left or left to right and diagonal style

How to write css code for linear gradients :

# Top to Bottom Linear Gradients Color :

div{

            margin: 10px;

            padding: 2px;

            height:150px;

            background-image:linear-gradient(red, black);

        }

by default the linear gradients are a mix of colors from top to bottom. You can combine more than one color, such as 2 colors or 3 colors or 4 colors and so on.

Then the result will be like this :

#  Bottom to Top Linear Gradients Color :

 div{

            margin: 10px;

            padding: 2px;

            height:150px;

            color: whitesmoke;

            background-image:linear-gradient(to top ,red, black);

        }

Then the result will be like this :

#  Right to Left Linear Gradients Color :

 div{

            margin: 10px;

            padding: 2px;

            height:150px;

            color: whitesmoke;

            background-image:linear-gradient(to left ,red, black);

        }

2.Adding Color Radial Gradients to the Background

Radial gradient is a combination of more than one color that forms a circle.

How to write css code for radial gradients :

 div{

            margin: 10px;

            padding: 2px;

            height:150px;

            color: whitesmoke;

            background-image:radial-gradient(red, black);

        }

Then the result will be like this :

Check out other articles about HTML & CSS:

1. Learn Input Types In HTML For Login And Register Form
2. Learn HTML List - How To Create Square, Circle, Number List
3. How To Create Comments Line In HTML
4. How to Add Text Formatting In HTML
5. Adding The Fieldset Code To The Form In HTML
6. How to Create a Search Box in Pure HTML
7. Create Color Charts With Pure HTML
8. How to change font size using CSS
9. Types of Border Styles in CSS Code
10. How to Change the Background Color in CSS

List of Article Posts https://buayaberdiri.blogspot.com