How to Obtain CSS3 Patterns Online - dummies

How to Obtain CSS3 Patterns Online

By John Paul Mueller

Creating simple effects for your CSS3 site using gradients is easy. However, creating something truly spectacular takes time and artistic ability. Most developers really don’t have the time or skills required to create something dazzling using CSS3 alone (or CSS3 combined with graphics) — that’s where designers come into play.

Many designers allow you to use their designs. You can find a number of sites with simple examples, such as those found here. As you can see, these patterns all rely on the CSS linear-gradient function.


In order to use these designs, you need to right-click your browser and choose the option for viewing the source code. The designs are all documented in the <style> tag that appears at the top of the page. All you need to do is copy the desired design from the page source to your application.

CSS3 Patterns Gallery provides a much larger group of significantly more complex designs. These patterns are all labeled so you know what the designers have named them. Click a pattern and you go to a page with that pattern as a background.

In addition, the code for that pattern appears in a window with the pattern. You can simply copy it from this window to your application. Believe it or not, all of these gorgeous designs use gradients alone — none of them rely on downloaded art to achieve their goals.


Patterns are so incredibly useful, diverse, and flexible that a lot of designers have gotten into the act. You can see a listing of some of the most interesting sites for obtaining these patterns at

It may be difficult to find precisely the pattern you want, but you should be able to find a pattern that works when you’re under a deadline and really need to create a great-looking page fast. Later, you can always substitute a more appropriate piece of art or other background pattern that’s better suited to your needs.

The advantages of using CSS3 patterns are that you get an interesting background for your site quickly and easily. In addition, patterns require few resources and they’re extremely fast to display.

However, it’s also important to realize that only people who own CSS3-capable browsers will be able to use this solution — everyone else will see a blank background, which is why you always provide a complementary color for the background as a minimum.

Although CSS3 patterns are long on pizzazz, they’re also quite short on compatibility, so you should consider using them only in situations where you know the user will actually see them onscreen.