How to create gradient background in CSS without image

How to create gradient background in CSS without image

Create smooth transitions between two or more colors by CSS3. The CSS3 Gradient makes countless nice looking effects. It is using for increase download speed of webpage and reduce usage of bandwidth. Therefore, I will show you. How to make different effects in CSS3 gradients?

In this topic, you will learn many effects of CSS3 gradients such as top to bottom, left to right, and many colors in CSS3 gradients.

Create Simple Linear Gradient Syntax – Top to Bottom

The Following Sample a linear gradient that start at the top. It start green, transitioning to yellow.

#sampleBox{ 
width:600px; height:600px; 
background: -webkit-linear-gradient( green,yellow ); 
background: -moz-linear-gradient( green,yellow ); 
background: -ms-linear-gradient( green,yellow ); 
background: -o-linear-gradient( green,yellow ); 
}

Output :

 

learn CSS Gradient Effects
learn CSS Gradient Effects

How to create gradient left to right ?

 

#sampleBox{ 
width:600px; height:600px; 
background: -webkit-linear-gradient( left, green,yellow ); 
background: -moz-linear-gradient( left, green,yellow ); 
background: -ms-linear-gradient( left, green,yellow ); 
background: -o-linear-gradient( left, green,yellow ); 
}

Output :

 

apply Gradient Effects without background
apply Gradient Effects without background

How to create gradient Bottom to Top ?

#sampleBox{ 
width:600px; height:600px; 
background: -webkit-linear-gradient( bottom, green,yellow ); 
background: -moz-linear-gradient( bottom, green,yellow ); 
background: -ms-linear-gradient( bottom, green,yellow ); 
background: -o-linear-gradient( bottom, green,yellow ); 
}

Output :

 

How-to-create-gradient-bottom-to-top
How-to-create-gradient-bottom-to-top

How to create gradient with one or more colors ?

 

#sampleBox{ 
width:600px; height:600px; 
background: -webkit-linear-gradient( green, yellow, red, blue, black ); 
background: -moz-linear-gradient( green, yellow, red, blue, black ); 
background: -ms-linear-gradient( green, yellow, red, blue, black ); 
background: -o-linear-gradient( green, yellow, red, blue, black ); 
}
How to create or apply gradient effects without images
How to create or apply gradient effects without images

if you like this topic please share us or comment us.

Leave a Comment