One cool way to use CSS is to create colorful repeating patterns. These patterns can be used as background images for entire pages or for certain block-level elements. These CSS creations can be anything from familiar patterns, like plaid or chevron, to more unique and one-of-a-kind designs. If you’re looking for a unique pattern to add to your projects that is pure CSS and not an image or an image of a pattern, then take a look at the following snippets to see if you have any uses for them or if you can customize them to make then even more unique before adding them to your sites. Be creative and have fun with it!
This snippet creates a pattern of colorful intersecting lines of varying lengths. It would be perfect to use as a background image for a page. Customize the colors so that the theme reflects the design of your project — you can even change the background from white to something for suitable to your project’s colors.
2. Plaid
This pattern creates a classic and familiar tartan plaid effect. While the colors in this particular snippet aren’t exactly traditional, they can be edited and changed to just about any combination you like — including the classic red and green.
3. Drops
This snippet creates a pattern of subdued droplets in two different colors. The drops can be customized to look like water or rain droplets if that suits your project, or you can take a more abstract approach and use colors other than shades of blue.
4. Corners
Use this snippet to create a trendy chevron pattern. There are a lot of different colors used in this particular pattern, so if you’d like it to look less busy, consider eliminating some of the colors.
5. Triangles
This snippet uses the simple CSS triangle shape to create a repeating triangle pattern that would add dimension to any project if it were used a background. To learn more about creating triangles, check out our tutorial on creating CSS shapes.
6. Ice Cream
Definitely the most fun pattern on this list, this snippet creates a repeating pattern of ice cream popsicles that look almost good enough to eat. Add this pattern to your project to give it a sense of whimsy — or if you’re going for a summer picnic theme.
This snippet creates a complex 3D pattern that looks different depending on which way you look at it or how you turn your head. Depending on how you focus your eyes, it can even look quite flat, rather than three-dimensional. This would be a funky addition to any project or site.
8. Fire Discs
This 70s-inspired pattern is created by layering a bunch of bright, burning-colored discs on top of each other to create a cool, almost 3 Dimensional effect. Add this background to any of your projects for a unique look.
9. Circles
This circular pattern is mesmerizing and actually quite simple to create. The snippet only requires relatively few lines of code to achieve the desired effect. Just don’t stare at it for too long or you might get dizzy!