Skip to main content

CSS3 Gradient Backgrounds

 The CSS gradient feature was introduced by Webkit for about two years but was rarely used due to incompatibility with most browers. But now with the Firefox 3.6+, which supports gradient, we can style create gradient without having to create an image. This post will show you how to code for the CSS gradient to be supported by the major browsers: IE, Firefox 3.6+, Safari, and Chrome. Read more >>

Linear Gradient (Top → Bottom)

#linearBg2 { background-color: #fddfa4; background: url(images/linear_bg_2.png); background-repeat: repeat-x; /* Safari 4-5, Chrome 1-9 */ background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fddfa4), to(#2F2727)); /* Safari 5.1, Chrome 10+ */ background: -webkit-linear-gradient(top, #2F2727, #fddfa4); /* Firefox 3.6+ */ background: -moz-linear-gradient(top, #2F2727, #fddfa4); /* IE 10 */ background: -ms-linear-gradient(top, #2F2727, #fddfa4); /* Opera 11.10+ */ background: -o-linear-gradient(top, #2F2727, #fddfa4); }

Linear Gradient (Left → Right)

#linearBg1 { background-color: #ec800b; background-repeat: repeat-y; /* Safari 4-5, Chrome 1-9 */ background: -webkit-gradient(linear, left top, right top, from(#fddfa4), to(#2F2727)); /* Safari 5.1, Chrome 10+ */ background: -webkit-linear-gradient(left, #2F2727, #fddfa4); /* Firefox 3.6+ */ background: -moz-linear-gradient(left, #2F2727, #fddfa4); /* IE 10 */ background: -ms-linear-gradient(left, #2F2727, #fddfa4); /* Opera 11.10+ */ background: -o-linear-gradient(left, #2F2727, #fddfa4); }

Linear Gradient (with Even Stops)

#even-stops { /* Safari 4-5, Chrome 1-9 */ background: -webkit-gradient(linear, left top, right top, from(#2F2727), color-stop(0.25, #fddfa4), color-stop(0.5, #2F2727), color-stop(0.75, #fddfa4), to(#2F2727)); /* Safari 5.1+, Chrome 10+ */ background: -webkit-linear-gradient(left, #2F2727, #fddfa4, #2F2727, #fddfa4, #2F2727); /* Firefox 3.6+ */ background: -moz-linear-gradient(left, #2F2727, #fddfa4, #2F2727, #fddfa4, #2F2727); /* IE 10 */ background: -ms-linear-gradient(left, #2F2727, #fddfa4, #2F2727, #fddfa4, #2F2727); /* Opera 11.10+ */ background: -o-linear-gradient(left, #2F2727, #fddfa4, #2F2727, #fddfa4, #2F2727); }

Linear Gradient (with Specified Arbitrary Stops)

#arbitrary-stops { /* Safari 4-5, Chrome 1-9 */ background: -webkit-gradient(linear, left top, right top, from(#2F2727), color-stop(0.05, #fddfa4), color-stop(0.5, #2F2727), color-stop(0.95, #fddfa4), to(#2F2727)); /* Safari 5.1+, Chrome 10+ */ background: -webkit-linear-gradient(left, #2F2727, #fddfa4 5%, #2F2727, #fddfa4 95%, #2F2727); /* Firefox 3.6+ */ background: -moz-linear-gradient(left, #2F2727, #fddfa4 5%, #2F2727, #fddfa4 95%, #2F2727); /* IE 10 */ background: -ms-linear-gradient(left, #2F2727, #fddfa4 5%, #2F2727, #fddfa4 95%, #2F2727); /* Opera 11.10+ */ background: -o-linear-gradient(left, #2F2727, #fddfa4 5%, #2F2727, #fddfa4 95%, #2F2727); }

Radial Gradient (Centered, Full Size)

#radial-center { background-color: #2F2727; background-image: url(images/radial_bg.png); background-position: center center; background-repeat: no-repeat; /* Safari 4-5, Chrome 1-9 */ /* Can’t specify a percentage size? Laaaaaame. */ background: -webkit-gradient(radial, center center, 0, center center, 460, from(#fddfa4), to(#2F2727)); /* Safari 5.1+, Chrome 10+ */ background: -webkit-radial-gradient(circle, #fddfa4, #2F2727); /* Firefox 3.6+ */ background: -moz-radial-gradient(circle, #fddfa4, #2F2727); /* IE 10 */ background: -ms-radial-gradient(circle, #fddfa4, #2F2727); /* Opera cannot do radial gradients yet */ }

Radial Gradient (Positioned, Sized)

Warning: Not Consistent Among Browsers

#radial-position { background-color: #2F2727; background-position: 80% 20%; background-repeat: no-repeat; /* Safari 4-5, Chrome 1-9 */ background: -webkit-gradient(radial, 80% 20%, 0, 80% 40%, 100, from(#fddfa4), to(#2F2727)); /* Safari 5.1+, Chrome 10+ */ background: -webkit-radial-gradient(80% 20%, closest-corner, #fddfa4, #2F2727); /* Firefox 3.6+ */ background: -moz-radial-gradient(80% 20%, closest-corner, #fddfa4, #2F2727); /* IE 10 */ background: -ms-radial-gradient(80% 20%, closest-corner, #fddfa4, #2F2727); /* Opera cannot do radial gradients yet */ }

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments

0
Would love your thoughts, please comment.x
()
x
×

Hello!

താഴെ കാണുന്ന വാട്സാപ്പ് ഐക്കൺ ക്ലിക്ക് ചെയ്യുകയോ ഈ മെയിൽ ഐഡിയിലേക്ക് മെയിൽ അയക്കുകയോ ചെയ്യുക.

രാജേഷ് ഒടയഞ്ചാൽ

×
Verified by MonsterInsights