Design Tools
Color Picker
Pick a colour and read off its HEX, RGB and HSL values.
Design Tools
Background Pattern Generator
Generate seamless CSS background patterns from gradients and copy the code.
Tool Panel
Processed locallyAbout Background Pattern Generator
Six seamlessly tiling patterns built purely from CSS gradients, with an adjustable angle for the stripes. No image assets, so no extra requests.
- 1
Six patterns (horizontal stripes, diagonal stripes, dots, grid, checkerboard, zigzag) are all **compositions of gradients**: a base colour plus one or more `repeating-linear-gradient` / `radial-gradient` layers, with `background-size` setting the repeat period. The output is a few lines of CSS.
- 2
The two colours are "paper" and "ink" (background and pattern); `size` is the tiling period and the angle only applies to the two stripe patterns — the mapping from controls to output is direct.
- 3
The payoff of pure CSS: no extra image request, colours that follow the theme, no blur at any scale, and crisp printing. The limit is that noise and hand-drawn textures are out of reach.
- 1
Pick a pattern
Six shapes; the two stripe patterns add an angle control.
- 2
Set paper, ink and period
The period (`size`) drives stripe width, dot spacing and grid cell size alike.
- 3
Copy the declarations
You get `background-color` plus `background-image` and friends, ready for any element.
**The first entry in the list is painted on top** — the opposite of the `z-index` intuition. The order the tool emits is deliberate; swap the entries to change the stacking.
Pure CSS needs no extra request, its colours are variables (so they follow theme and dark mode), it stays sharp when scaled or printed, and it costs a few dozen bytes. What it cannot do is noise, paper texture or watercolour — those need an image, and complex vector textures are better served by SVG `pattern`.
Related tools
View allDesign Tools
Contrast Checker
Check foreground and background contrast against accessibility thresholds.
Design Tools
Design Tools
Gradient Generator
Build CSS linear and radial gradients visually, then copy the code.
Design Tools
Design Tools
Box Shadow Generator
Tune a box shadow visually and copy the CSS.
Design Tools
Design Tools
Unit Converter
Convert physical units across length, weight, volume and more.
Design Tools
Design Tools
Bytes Converter
Convert between bytes, KB, MB, GB and TB.
Design Tools
Design Tools
Border Radius Generator
Tune each corner visually and copy the CSS border-radius.
Design Tools
Design Tools
Clip Path Generator
Drag the points to shape a polygon and copy the CSS clip-path.
Design Tools