Hoverstat showcases alternative web design, code, and content through a gallery of online projects.
css3patterns
Browse CSS patterns, expand examples, and edit their code in the CSS3 Patterns Gallery.
About css3patterns
The CSS3 Patterns Gallery is a browsable collection of background patterns built with CSS gradients rather than image files. Visitors click a pattern to expand it, and the accompanying code appears in an editable textarea. Patterns are credited to Lea Verou unless another author is named, and new entries are submitted as pull requests, which are not all accepted.
The gallery states that the patterns should work on Firefox 3.6+, Chrome, Safari 5.1, Opera 11.10+ and IE10+, though implementation limitations can prevent some from displaying correctly on those browsers. The gallery page itself does not work in Firefox 3.6 or IE10 because of a JavaScript limitation.
Key features
- Gallery of background patterns made with CSS gradients, not images
- Click a pattern to expand it
- Editable code textareas alongside the patterns
- Patterns target Firefox 3.6+, Chrome, Safari 5.1, Opera 11.10+, IE10+
- New patterns submitted via GitHub pull requests and reviewed
- Patterns credited to Lea Verou unless another author is named
Best for: Web designers and developers who want lightweight CSS gradient backgrounds that avoid image files and extra HTTP requests.
Good for
- Patterns use gradients to reduce file size and HTTP requests instead of data URIs
- Pattern code can be edited directly in the page
- Submission process exists for contributing new patterns
Watch out for
- The gallery itself does not work in Firefox 3.6 or IE10 because of a JavaScript limitation
- Some patterns may not display correctly even on supported browsers due to implementation limitations
- Not all submitted patterns can be accepted
css3patterns at a glance
- Category
- Design & Creative › Design Assets & Inspiration
- Type
- Website
- Pricing
- Not confirmed. Check the site
- Platforms
- Web
- Open source
- Not stated
- Last checked
- Oct 6, 2026 · Online when checked
- Listed
- Oct 5, 2026
css3patterns alternatives
Tools and sites you could use instead, ranked by how closely they match.
Website design examples are curated in Httpster, a gallery of creative sites from around the web.
Browse interface components from design systems in The Component Gallery, a reference for building user interfaces.
Browse and copy HTML and CSS button examples from this collection of interface design snippets.
Browse and search artwork in Artchive, an online gallery that has been operating since 1998.
Browse web design examples with HTML and CSS snippets in CodeMyUI’s handpicked inspiration collection.
Popular in Design Assets & Inspiration
Well-known listings from the same topic.
Arts and Cultureartsandculture.google.comFigmafigma.comUI Discoveryuidiscovery.comLS Graphicsls.graphicsToools.designtoools.designArtveeartvee.com
css3patterns FAQ
Which browsers do the patterns support?
The patterns should work on Firefox 3.6+, Chrome, Safari 5.1, Opera 11.10+ and IE10+, though implementation limitations might cause some to display incorrectly.
Does the gallery work in every browser that supports gradients?
No. The gallery will not work in Firefox 3.6 or IE10, even though those browsers support gradients, because of a JavaScript limitation.
How are new patterns submitted?
By pull request. Acceptance is weighed on factors including whether the pattern presents a new technique, whether the gradient and color stop count is worth the effect, how common the pattern is, and whether it looks nice.
Is something wrong or out of date?
Tell us and an editor will check it.
Own this website?
Claim this listing
Claim the listing and suggest updates yourself. An editor checks every claim first.