Responsive Design: CSS Gradients vs. Background Images

When you're integrating responsive design, using a background image in your CSS can become tricky, but it's not impossible. In order to maintain best practices and keep on the cutting edge, consider using CSS gradients instead of background images.

It's not uncommon to see a website design that utilizes background images in different areas of the site—perhaps behind a form or in a news feed. Sometimes the images are solid and easy to code, sometimes they have a fade that eventually goes to a solid color, and sometimes there's a random, rounded corner—all doable. But then there are times when the main feature of background is actually a gradient image that fades in the middle—it has to be an image, right? Wrong. With the updated advantages of HTML5 and CCS3, you can now code gradients in your files.

It takes a bit of CSS understanding and knowing where positions are within the code. There are special lines for different browsers, as well, so take note of that. Since we can't all be custom hand coders, here are some generators to get you started.

Examples of CSS Code Generators

• Ultimate CSS Gradient Generator A good one to remember; has a special SCSS switch and helps with Internet Explorer.
• CSS Gradient Generator My personal favorite because you can pick the color swatches on the screen. I have noticed it doesn't always take in Firefox and sometimes involves some tweaking, so double-check it before you publish your page.
• CSS Gradient Background Maker Definitely worth trying out but only let's you choose two colors.
• Cross-Browser CSS Gradient This is actually less of a generator and more of an explainer. It's a great place to start if you want to learn what positions go where for which browser and how to adapt your CSS for each.
• CSS3 Gradient background This is just another reference point, but I like the examples and double-check my work this way, too.

There are plenty of other responsive design, CSS3 and HTML5 tips and tricks out there. What tools have you found most helpful?

Photo credit: Lelê Breveglieri

As a creative web developer, Maddie Weber truly enjoys drinking lattes, focusing on user experience for website design and development, and writing haikus. You can connect with her on Twitter.