CSS Background Patterns
CSS Background Patterns
Beautiful pure CSS background patterns that you can actually use in your projects!
Created by @d__raptis
Back Color:
Front Color:
Opacity:
Spacing:
Wavy
Rhombus
ZigZag
ZigZag 3D
Moon
Circles
Diagonal
Diagonal v2
Paper
Isometric
Polka
Polka v2
Lines
Lines v2
Diagonal v3
Boxes
Lines v3
Lines v4
Triangle
Triangle v2
Rectangles
Cross
ABOUT THE TOOL
CSS Background Patterns
CSS Background Patterns is fun little free tool that lets you create cool CSS patterns for your website background. We've curated and parameterized this collection of pure CSS patterns to help you generate & customize the most cool CSS seamless patterns around the web. The collection is being updated regurarly!
Why did you build this tool?
Patterns are everywhere! From your website to your favorite book cover. There're several pattern generators out there but most of them miss something.
CSS background patterns come to the rescue with an easy-to-use interface and a rich collection of CSS backgrounds, 1 click away from your project.
My goal was to offer you a simple app to customize & export a cool CSS background for your projects.
How to add a CSS background pattern on my website?
The easies way to add a div element with its position fixed inside the <body> element.
Check this Codepen code for a real-life example!
Hi fellow creator!
I'm Jim, the founder, designer & engineer behind the MagicPattern toolbox.
For many years, I was struggling to create engaging visuals for products, branding and interfaces. Their creation required pro design skills or many hours of practice.
That's why I build MagicPattern. My mission is to help people create pro graphics with no effort and no prior design knowledge.
©2024 MagicPattern. Founded by Jim Raptis
