What’s up guys. Carlton Stith here and I’m back to discuss how to create linear gradients using CSS3 only! Yes, no more images here baby. A lot of things that used to require images can now be recreated using just CSS3. We are tossing images to the side (we will have to recreate our images for older browsers) in order to use CSS3 to create our gradients. Do you like how that sounds? Well, let’s get started.
CSS3 is recreating the way developers make stuff for the web. Photo courtesy of brianjmatis.
Let’s start with some basic divs. Nothing special here, right? In our CSS, we are going to call on these divs to give them some styles.
Next we are going to give our div’s some classes. Of course, If I were building an actual site, my div’s would be semantic.
.gradientA – Once we have our structure set up, we can start creating our gradients. Lets target the first div to give it a pretty basic gradient. Nothing special here.
.gradientB – Now let’s take a look at how this gradient will look with more than two colors.
.gradientC – Now let’s take a look at how this gradient will look with more than two colors that blend.
.gradientD – Now let’s take a look at how this gradient will look with more than two colors that do not blend.
.gradientE -We can even create gradients to begin from the bottom, top, etc.
.gradientF – Bottom left, top right, etc. can be used to give our gradient a slight angle.
.gradientG – You can even use degrees (positive or negative) to achieve this same slight angle effect.
.gradientH – Use the word repeating with color stops to create a repeating linear gradient.
.gradientI – Start the repeating linear gradient from an angle.
Conclusion
Besides using hexadecimals, all linear gradients accept RGB, RGBa, HSL and HSLa. Feel free to include some cool JavaScript to give the gradients some neat animation. You can also animate these using pseudo elements for your hovers.
Using CSS3 does have some immediate drawbacks though. If you don’t include the necessary vendor prefixes, people without modern browsers will not be able to see what you took the time to create. Some browsers can’t use a lot of the syntaxes in CSS3 as of yet. For those, you can simply use a fallback image. The various syntaxes for rendering engines that don’t yet accept CSS3 linear gradients are…
-
Firefox: -moz-
-
Safari and Chrome: -webkit-
-
Opera: -o-
-
Internet Explorer: -ms-
Further Reading
What the folks at the W3C have to say about linear gradients
Linear Gradients by Chris Coyier of CSS Tricks
A quick and dirty little CSS Gradient Generator
An article by Chris Mills on CSS3 for A List Apart
One thought on “Super Easy Linear Gradients Using CSS3”