CSS3 patterns gallery and a new pattern

I finally got around to doing what I wanted to do for quite a few months: Create a gallery with all the basic patterns I was able to create with CSS3 gradients. Here it is: 
CSS3 Pattern Gallery

Also, it includes a brand new pattern, which is the hardest one I have ever made so far: Japanese cubes. Thanks to David Storey for challenging me about it.

Supported browsers:

  • Firefox 4 (the patterns themselves work on 3.6 too but the gallery doesn’t due to a JS limitation)
  • Opera 11.10
  • IE10
  • Google Chrome
  • Webkit nightlies

However bear in mind that every implementation has its limitations so a few of them won’t work in all the aforementioned browsers (for example Opera doesn’t support radial gradients and Firefox doesn’t support explicitly sized ones).

  • Anonymous

    Impressive! Diagonal stripes really useful!

  • http://profiles.google.com/bhofmann.hotmail.co.uk Bernhard Hofmann

    Might be me and Chrome 12, but the horizontal and vertical stripes are switched.

    • http://pulse.yahoo.com/_OLIDCDYXW6U5MSTRLGV3FA6FBM Steven

      Yes, they are definitely switched.

    • http://leaverou.me Lea Verou

      Fixed, thanks! :)

  • None

    Uh… Your stuff doesn’t work on Safari. How did you manage that, really?

    • http://leaverou.me Lea Verou

      Did I mention Safari in the supported browsers list? No.
      The standards compliant gradient syntax hasn’t propagated to Safari yet (it is in the nightlies, but not the stable version).

      • Antoine

        Did you call the link “Rendering Engine Support”? No.
        The link at the top of the page says “Browser support”. If you call it that, you might want to be explicit about browsers you support. Just saying “WebKit nightlies” is bound to be confusing. To most humans, “WebKit nightlies” is not thought of as a “browser”.

        • ChristopherAnderton

          However, the demo site is mostly for developers and designers. And i think most of them know what WebKit Nightlies are.

  • http://pulse.yahoo.com/_OLIDCDYXW6U5MSTRLGV3FA6FBM Steven

    These are awesome! I see some improvement needed (on the browser end) for some of the diagonal ones – a little jagged looking in places. Opera isn’t showing the polka dot one at all for me.

    • http://leaverou.me Lea Verou

      Opera doesn’t support radial gradients yet, which are needed for any circular pattern.

  • http://www.facebook.com/shaun.kardinal Shaun Kardinal

    chrome 11 here on a mac- they all show up for a flash then disappear. this is sad because they look GREAT for that second!

    • http://leaverou.me Lea Verou

      Strange. I’m on Chrome 10 on Mac and it works fine. :-S

  • http://dan.cx/ Daniel15

    Amazing! Very nice, these are great!

  • Pingback: Some links for light reading (28/4/11) | Max Design

  • Pingback: Checkerboard, striped & other background patterns with CSS3 gradients | Lea Verou

  • Anonymous

    It says on the gallery that the idea is to make the page load faster. You have patterns here that cost 300B+ that can be created as images that cost 200B and don’t have the (huge) overhead of rendering all that in the browser. Some of the patterns actually locked my browser up for several seconds (the carbon fibre dots one is an example) firefox 4, Quad core 3Ghz CPU with 4GB ram – you can’t blame my setup!

    These are interesting as proofs of concept but creating backgrounds with them is just insane.

    • http://leaverou.me Lea Verou

      It says many things, not just that. It also says they are easier to edit for example.

      Even the patterns that could be created with 200B at that size, would probably be much larger at a larger size. However, the gradient version would still be 300B.

      There is a slight delay because there are 23 different patterns there, which is way more than how many an average website would use. However, that delay is nothing even close to “several seconds” (it’s around 500ms and even less on other browsers) and that’s just not my impression, but many other people’s that tested it. I’m not blaming your setup, but any computer is occasionally slow.

  • http://www.facebook.com/profile.php?id=1011210217 Samantha Barnes

     I’m not sure why, but the argyle pattern isn’t displaying for me in Google Chrome. I’m trying to implement it and its just not working.  Does chrome have issues with repeating-linear-gradients?

    • http://leaverou.me Lea Verou

      Strange. It appears fine in my Chrome and many other people’s. It doesn’t display at all, even in the gallery? 

      • http://www.facebook.com/profile.php?id=1011210217 Samantha Barnes

        That’s the weird part for me. Your gallery displays great. But when I implement it into my css, it doesn’t work. Unfortunately, I don’t have a working link I can show you as an example, but unless there is something I’m missing about setup (what selectors I should be using to style, etc.) the argyle pattern hates me. lol 

      • http://www.facebook.com/profile.php?id=1011210217 Samantha Barnes

        That’s the weird part for me. Your gallery displays great. But when I implement it into my css, it doesn’t work. Unfortunately, I don’t have a working link I can show you as an example, but unless there is something I’m missing about setup (what selectors I should be using to style, etc.) the argyle pattern hates me. lol 

        • http://leaverou.me Lea Verou

          Gah, I must add a note about this, it seems to confuse so many people.You need to add the browser prefixes for the code to actually be used in production (-moz-, -ms-, -o-, -webkit-). The reason the gallery shows the unprefixed code only is just for clarity & readability.

        • http://www.facebook.com/profile.php?id=1011210217 Samantha Barnes

          I was wondering about that, so I just started adding them. I went and examine your direct code and noticed you had added the webkit prefix. Thanks for clarifying though :) 

        • http://leaverou.me Lea Verou

          It needs all prefixes, don’t just add -webkit-! In the gallery there’s a script that detects which prefix the current browser supports and adds that. 

        • http://www.facebook.com/profile.php?id=1011210217 Samantha Barnes

          Yeah I knew that. Thanks though 

        • http://leaverou.me Lea Verou

          Gah, I must add a note about this, it seems to confuse so many people.You need to add the browser prefixes for the code to actually be used in production (-moz-, -ms-, -o-, -webkit-). The reason the gallery shows the unprefixed code only is just for clarity & readability.

  • http://twitter.com/gresleyalan Alan Gresley

    Some wonderful gradient patterns here. I have done a few interesting ones with radial-gradient which I may submit when I can establish that they are under 2kb. I have discovered a bug in Chrome with repeating-linear-gradient when you begin the initial color stop beyond 50% (ie. 51px, 100px or 75px, 100px). It creates a tartan affect when mixing vertical and horizontal repeating-linear-gradient.

  • Pingback: Combining the Cicada Principle with CSS3 Background Gradients | For the Developer

  • http://www.facebook.com/franklovecchio Frank LoVecchio

    Burberry!  It still needs a few tweaks, but I had 15 minutes to spare http://dadeindustries.com/franklovecchio_dev/sandbox/burberry/  

    • http://leaverou.me Lea Verou

      Nice idea! Although I probably can’t add it to the gallery since there’s already a Tartan one there, and the techniques needed are very similar.

  • Martinjgriffiths

    Hi Lea, Would you be willing to add the -ms prefixes to see how these CSS gradients work in IE 10 PP2?

    • http://leaverou.me Lea Verou

      My script already caters for -ms- prefixes. However, it won’t work in IE10 for the same reason it doesn’t work on Firefox 3.6: There’s no way to get the original (unfiltered) style attribute of an element through JS.

  • http://www.facebook.com/adriamooney Adria Mooney

    Thanks for this, it’s totally awesome!  I would love to see some step by step tutorials explaining how to create some of the more complicated shapes, like stars for example. 

  • Pingback: CSS3 patterns gallery | Mypixel.se

  • Me

    Nice work, using a variant of one I found here for card backs - http://jsfiddle.net/wE8te/33/

  • Pingback: Innovators of the Web | ClintonNash

  • Simon Pieren

    There is a problem with the pattern “Lined Paper”: The horizontal lines are not visible in Firefox (11). Only when you zoom into the site the lines are visible.. Do you know how to fix this bug?

  • John K.

    Cool. The cubes are amazing. Marrakesh is neat, but (fwiw) doesn’t hold up under changing page zoom (in Chrome).
    Starry Night, while not necessarily the most aesthetic, looks like an early example of the cicada principle, suggesting extension into more complete pseudo-randomness.

    P.S. Congratulations on joining WC3! We’ll be looking forward to injections of rationality and sensibility into the standards.

  • alvaro

    I am getting my degree in Copying and Pasting. I copied the code just as it is on clicking the patterns, I pasted it on my css page and all I get is the background color, but none of the patterns, shapes, changes in transparence, nothing. I am using the pie.htc stuff. When I saved the pie js files in the folder, my editor Eclipse marks several of the pie files as Warning because, it has lots of semicolons missing. but I have just downloaded it, unzipped it and uploaded.

    And another question Lea. Are you married?

    thank you

    Alvaro

    • http://lea.verou.me/ Lea Verou

      You either need to use the appropriate vendor prefixes, or use -prefix-free. PIE has absolutely nothing to do with it.

  • Pingback: Mouse Follow – jQuery ile Nesneleri Mouseye Takip Ettirme | Mintik

  • discover_now

    Thank you for such a wonderful gallery of CSS patterns! I used the

    Carbon fibre. It looks great on my PC across browsers but no pattern is showing on my iPhone or iPad, just the solid background color. Does anyone have this issue? Thanks!

  • Pingback: Animasyonlu jQuery Css3 üst menü örneği | Mintik.com

  • Pingback: CSS gradients: basic to advanced | Getting Unstuck

  • Pingback: AnimeBand – Farklı bir üst menü tasarımı

  • Pingback: Mouseyi takip eden resim