7 Fresh CSS3 Resources For Clean, Modern Background Designs.

By Tara Hornor

Mar 24, 2015

Creative backgrounds are an extremely popular trend in web design this year, especially using photographs. The danger is in lack of originality. Take a look on Awwwards and you may notice a large number of web designs that use a large or full screen photograph for the background, solid colored or photograph boxes, and simple gradient buttons.

While these websites are beautiful, a little bit of originality goes a long way in today’s world of flat designs and solid colored boxes. CSS3 gradient patterns to the rescue! And so much more can be done with these gradients than, well, a simple gradient.

The CSS gradients come in linear (straight lines) or radial (circles or ellipses) form, and either can be used to design some incredibly stunning patterns. The result? Clean, modern, backgrounds for small and large areas alike!

With radial or linear gradient patterns, you have several options to create different backgrounds in web design. For instance, you can use the transparent background technique and place layer upon layer of gradients on top of one another, which makes for some very complex designs as Justin Voelkel points out.

Now, the complexity is where it starts to get messy, and I think this is important to note. The benefit of CSS3 gradients are that they can provide shorter code; the code is easily read, understood, and changed without leaving the CSS file; and there is no need for HTTP requests. As Lea Verou points out in her famous article on this subject, way too complex gradient patterns violate the first benefits (short, readable, easy-to-edit code). In this case, you should just take her advice and use SVG or bitmap images for a background pattern, rather than CSS.

Using images brings me to another awesome option in using linear and radial gradients for backgrounds: you can place a simple pattern on an image to create a very eye-catching effect. This way, you aren’t just copying the full screen photo background trend that can be found everywhere these days. A photograph with a transparent CSS pattern on top can give your web design a number of looks, from grunge to retro to dreamy. You can also use a low-quality image (to a certain extent) because you are covering up the details with a pattern overlay, hence further speeding up the load time.

Creating your own CSS3 patterns does come with one glaring problem. In addition to designing a website, designing a pattern may be out of the picture for you, especially if you are pressed for time. Getting the equations just right takes some figuring out, even if you do read Verou’s tips above.

This is why I’ve scoured the web for seven of the best resources available for creating unique backgrounds for web designs. The following list includes gradient generators, editable patterns, plus a few extras. All are favorites for CSS3 gradient patterns and include enough variety to make this an important list to keep on hand to save you time in creating clean, modern background designs.

1. CSS3 PIE.

Before explaining why I’ve included the PIE (Progressive Internet Explorer) tool in this roundup, let’s look at browser compatibility. CSS gradients work with all modern browsers: Chrome 10+, Safari 5.1+, Firefox 3.6+, Internet Explorer 10, and Opera 11.10+ (radial gradients for Opera 11.60+). If your users will view your site from IE versions 6-9, though, you had better make sure you include a background color for at least a little bit of appeal. That is, until PIE.

With PIE, you simply add one short rule to the CSS to ensure gradients work for Internet Explorer 6+. Wait…what? Yep, it’s that easy! Just download the tool to generate the right rule for whatever task you are accomplishing with CSS, be it gradients, rounded corners, drop shadows, and more.

2. CSS3 Patterns Gallery.

As mentioned above, Lea Verou has created some highly complex patterns, mostly in an attempt to help others fully understand the code behind CSS gradients. In this subject and more, she is extremely knowledgeable and quite brilliant. As a true web standards geek and Javascript / CSS lover, Verou has an incredible resume that includes working for W3C/ MIT.

Her CSS3 patterns gallery includes both her own creations as well as some from other designers. All are very unique and show the different ways that you can manipulate gradients for some amazing patterns. To use the pattern or manipulate it for your own, just click on the thumbnail to see a full screen preview as well as code to copy. Because of Javascript limitations, the patterns won’t work in Firefox 3.6 and IE10. And if you come up with a pattern the fits her standards, you can submit it for her approval.

3. Standardista CSS Gradients.

The patterns gallery from Standardista.com includes several excellent patterns. Some, like a few of Lea’s, are only appropriate for learning gradients like the back of your hand, if you have such a need to do so. Others look nice enough to use alone or to edit for your own web design.

The only annoying part of this gallery is that the code for each category is consolidated onto a single page for that category. For instance, if you click on the Download CSS link in the Newest Additions category, you’ll be redirected to a page full of code. Now each code is titled, but many of the titles in the code do not match up with the titles displayed on the thumbnails. So figuring out which code goes to which pattern takes a bit of deciphering.

4. Fivera.net Live Editable Showcase.

Nikola Petrovic has provided a really cool list of CSS3 patterns on his website Fivera.net. Some of them are quite similar to some found on Lea’s site, but to his credit he does mention that she and Chris Coyier are his inspiration. The nifty part of his list involves Codepen.

You can click on the Edit on Codepen link to be taken to the Codepen Editor with the pattern’s code already entered into the CSS column. From there you can edit the code and see the changes occur in real-time in the preview section.  Or if you like the pattern as is, then click on the CSS link to copy the code.

5. Demosthenes CSS Gradients.

Dudley Storey covers a wide variety of in-depth HTML, CSS, and SVG topics on his blog, Demosthenes.info. Take a look at any of his articles on his blog or his book on Pro CSS3 Animation, and you can see that he really knows what he’s talking about. His blog is really well organized too, for such a large amount of content. He has huge list of categories, and under these, sub-categories that include so many posts, you could spend days on a single sub-category alone.

Storey’s posts on CSS3 gradients are really impressive. I clicked on the CSS>Gradients categories to find some really incredible discussions and tutorials on subjects such as layering linear gradients on top of images. The Demosthenes site is one that you won’t want to pass up if you want to learn from basic to advanced ways of using linear/ radial gradients and much more.

6. Westciv.com Gradients Tools.

I was super excited to come across John Alsopp. He is quite the expert when it comes to web standards, and his information and tools for CSS3 gradients are both easy to understand and can be taken to the advanced level. You may want to start with his article on Linear Gradients and then his information on Radial Gradients before using his tools.

He separates linear and radial gradients into two completely separate but similar tools, which is quite different than many other gradient tools out there. Both the linear tool and the radial tool come with the ability to add multiple stops and to add the repeating gradient function to make creating a pattern much faster. You can also choose to add in vendor specific prefixes (browser prefixes) with a click of a button.

7. CSSMatic Gradient Editor.

After testing out a number of different CSS3 gradient editors online (and there are a ton out there, so you’re welcome), I personally liked the CSSMatic gradient editor best. It has a few presets, not as many as the editor from Colorzilla, but the tool was much easier to use and still very similar to Photoshop’s gradient tool.

You can add in as many stops as you want to create a unique gradient pattern, either radial or linear. It even comes with SASS code, IE9 support, multiple color formats, the ability to save your preset, and an import from css option. The guys at CSSMatic outdid themselves once again!

Keep In Mind….

Don’t forget to keep these points in mind with radial and linear gradients:

• CSS gradients are supported by modern browsers, but make sure to include the browser prefix for each one that is relevant for your audience.

   

• Make sure to include a background color for browsers that do not support gradients, so that users will at least see some color on the background. If you are able, use a tool that makes CSS3 compatible with earlier versions of IE.

• Keep in mind that you may also need to use the Webkit prefix to make gradients visible to users of older browsers.

• If your CSS becomes way too long and complicated for your pattern, you are better off using an image in its place.

And be sure to save yourself some time by using the CSS3 resources above. Starting with a pre-existing pattern or a tool means shorter design time, which in turn equals better pay-per-project. So feel free to bookmark this page to return to whenever you find yourself in need of gradient patterns for your web designs.

Do you have any favorite CSS3 gradient resources? If so, please share in the comments below!

Blog  /  Web Design  /  Resources

Comment