The Future of Marketing: Social Listening + Action — Free Webcast ›
Popular Today in Business: All Popular Articles

Responsive Design: CSS Gradients vs. Background Images

Online Marketing

Responsive Design: CSS Gradients vs. Background Images image nail gradient blog postWhen 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 utlizes 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

 

Responsive Design: CSS Gradients vs. Background Images image 14c8632a 335d 4895 8387 65955b5f72381

RSS Comments Feed

Comments on this Article: 1

Add a Comment
  1. Mitata says:

    There is a lot of performance problems with css gradients, if you use them at animated html elements.

Add a Comment:


Thank you for adding to the conversation!

Our comments are moderated. Your comment may not appear immediately.