Background Pattern Generator (CSS & SVG)
Fifteen seamless patterns with your colors, size and angle — as CSS, SVG or PNG.
Preview
Pattern
Settings
Colors
Colors accept HEX, rgb(), hsl() or names; add transparency with 8-digit HEX or rgb(… / 50%).
Presets
Code
Download
Seamless tile
At this rotation the pattern has no small seamless tile. Download a wallpaper, or set the rotation to a multiple of 90°.
Wallpaper
About the Background Pattern Generator (CSS & SVG)
Design a repeating background in seconds. Pick one of fifteen patterns — stripes, checks, gingham, polka dots, grid lines, graph paper, diagonal hatching, cross-hatching, zigzags and chevrons, waves, triangles, hexagons, isometric cubes, plus signs and random confetti — then set the colors, the size, the line width, the gaps and the angle. Every pattern here was drawn for this tool from simple geometry; none comes from a third-party pack.
The code is as light as possible: patterns that CSS can draw by itself are written as pure CSS gradients (no image at all); the others become a small SVG tile embedded in the CSS as a data URI. Tiles repeat without seams — shapes that cross an edge continue on the opposite edge, and tile sizes are whole pixels. You can also copy the SVG, or download an SVG or PNG tile (1× or 2×) or a full-size PNG or SVG wallpaper.
How to use it
- Choose a pattern. Each one opens with settings that suit it; pick a Style where offered (for example staggered or grid dots, lines or filled hexagons).
- Drag Size, Line width, Gap and Rotation. The preview shows the pattern at its real size.
- Set the main, accent and background colors — or tick Transparent background to lay the pattern over anything.
- Copy the CSS (rename the class if you like), the SVG or the Data URI.
- Or download a seamless tile as SVG or PNG, or a wallpaper in a desktop, phone or custom size.
Examples
Polka dots · grid · 6px dots · 10px gap
.pattern {
background-color: #ffffff;
background-image: radial-gradient(circle, #5b7cfa 2.5px, transparent 3.5px);
background-size: 16px 16px;
}The 1px soft edge between 2.5px and 3.5px keeps the dots round instead of jagged.
Diagonal hatching · 2px lines · 8px gap · 45°
background-image: repeating-linear-gradient(225deg, #5b7cfa 0 2px, transparent 2px 10px);
Stripes and hatching stay pure CSS at any angle; their 45° seamless tile is 14 × 14 px.
Hexagons · honeycomb lines · 34px high
background-image: url("data:image/svg+xml,%3Csvg …");
background-size: 29px 51px;A honeycomb tile is √3 × 17 ≈ 29.4 px wide and 3 × 17 = 51 px high; it is rounded to whole pixels so it repeats without hairlines.
Common uses
- Subtle page, card and hero backgrounds that weigh a few hundred bytes.
- Graph paper, dot grids and blueprint grids for notes, canvases and documentation sites.
- Fabric-like patterns (gingham, stripes, checks) for packaging, posters and slides.
- Phone and desktop wallpapers, and tiles for design tools and game textures.
CSS gradients or an SVG tile?
Stripes, hatching and cross-hatching are made with repeating-linear-gradient(), polka dots with radial-gradient() in a repeating tile, checks with repeating-conic-gradient(), and grids, graph paper and gingham with thin linear-gradient() bands (CSS Images 3, CSS Images 4). Gradient patterns need no image request, scale cleanly on high-density screens and can be edited in the CSS. Shapes that gradients cannot draw — zigzags, waves, triangles, hexagons, cubes, plus signs, confetti — are written as an SVG tile (SVG 2 pattern element) and placed in the CSS as a URL-encoded data URI, which is still only a few hundred bytes for most patterns.
Seamless tiles and rotation
A tile repeats without seams when everything that leaves one edge comes back on the opposite edge. Every shape that crosses an edge is therefore drawn a second time, shifted by one tile, and tile sizes are rounded to whole pixels — the shapes are stretched by a fraction of a percent — because browsers can leave hairline gaps between tiles with fractional sizes.
Stripes and hatching are seamless at any angle: rotated by θ, stripes with period p repeat every p ÷ |sin θ| across and p ÷ |cos θ| down, so they get an exact tile (14 × 14 px for 10px stripes at 45°); cross-hatching does so at 45° steps. Any pattern can be turned by 90°. Other angles have no small repeating tile, so the CSS then uses an SVG that fills the element and rotates the pattern inside it, and the downloads offer a wallpaper instead of a tile.
Limitations
- Rotated 2-D patterns (other than 90° steps) have no small tile; the CSS embeds an SVG that fills the element, and only wallpaper downloads are offered.
- PNG tiles and wallpapers are at most 4,096 px on each side. Use the SVG for anything larger.
- Confetti tiles repeat every six pieces in each direction; on very large areas the repetition can show.
- Very fine patterns (1–2 px) can shimmer (moiré) when a page is zoomed or scaled; use whole-pixel sizes for crisp lines.
Privacy
Everything happens in your browser. What you enter or open here is not uploaded or stored by MySmartCoPilot.
Frequently asked questions
How do I use the pattern on my website?
Copy the CSS and add the class to any element — a section, a card or the body. To lay a pattern over a photo or a gradient, tick Transparent background and add the CSS as an extra background layer.
Why are some patterns pure CSS and others SVG?
CSS gradients can only draw straight bands, circles and pie slices. Stripes, dots, checks and grids are built from those; zigzags, waves, hexagons, cubes, plus signs and confetti need real shapes, so they use a small SVG tile.
Are the tiles really seamless?
Yes. Shapes that cross an edge continue on the opposite edge, and tile sizes are whole pixels, so they repeat without visible joins in CSS, image editors and 3D textures.
Can I make the background transparent?
Tick Transparent background. The CSS then has no background color and the downloaded SVG and PNG files are transparent around the shapes.
Are these patterns free to use?
Yes. The patterns are drawn by this tool from your settings, not taken from a pattern pack, and MySmartCoPilot claims no rights over the results you create (terms) — use them in personal or commercial work.
Is anything uploaded?
No. Patterns, code and images are made in your browser, and the page works offline once loaded.