how to create gradient effects and backgrounds with CSS3 -Labstech.org

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.

Summary
Review Date
Reviewed Item
Best gradient Effects by CSS3.
Author Rating
51star1star1star1star1star
Author

My name is Vijay Rajbhar. I am a software developer from india, i am learning everyday new things. i believe that share knowledge that i will makes your more perfect. Do you want to learn computer and internet.

Write A Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.