Pattern Generator (SVG/CSS)

Pattern controls

Pattern type

Pattern units

CSS image method

SVG pattern ID

Export SVG width

Export SVG height

Export SVG viewBox

Pattern width

Pattern height

Shape size

Horizontal gap

Vertical gap

Stroke width

Shape corner radius

Pattern rotation

Shape rotation

Pattern opacity1.00

X offset

Y offset

Pattern scale1.00×

Pattern density1.00×

Background color

Primary color

Secondary color

Accent color

Primary HEX

Primary RGB

Primary HSL

Blend mode

Stroke dash array

Transparent background

Use soft SVG mask

Clip shapes to tile

Enable second layer

Pattern presets

Live preview

Responsive CSS controls

Tablet scale

Mobile scale

Tablet breakpoint

Mobile breakpoint

Generate media queries

Use CSS custom properties

Generated code and exports

Copied.

Formula used

The generator builds a repeating SVG tile from your chosen dimensions. Density adjusts the effective tile size before scale is applied. Rotation transforms pattern geometry around the tile center. Offsets shift the pattern origin along both axes. Opacity multiplies the visibility of generated shapes. A second layer is encoded as another background image when enabled.

How to use this calculator

Select a pattern type or load a preset.
Adjust tile size shape size spacing colors and rotation.
Enable advanced layers masks or custom SVG paths when needed.
Review the live preview and responsive CSS settings.
Copy code or download SVG CSS PNG and configuration files.

Example pattern settings

Pattern	Tile	Shape	Rotation	Good use
Diagonal stripes	32 × 32	10	45°	Section backgrounds
Dots	28 × 28	6	0°	Subtle texture
Grid	24 × 24	8	0°	Technical layouts
Waves	48 × 32	12	0°	Decorative headers

SVG and CSS patterns

SVG patterns are lightweight vector backgrounds that stay sharp at every resolution. They work well for geometric designs and detailed repeating artwork. CSS gradients can create several patterns without extra image files. This generator focuses on SVG tiles because they support more shapes. Generated SVG is embedded directly into CSS as a data URI.

Presets provide fast starting points for common visual styles. Every preset remains fully editable after loading. Layer controls can combine two independent pattern ideas. Blend modes produce richer textures without additional image assets. Responsive settings create alternate tile scales for smaller screens. This keeps visual density balanced across different device sizes.

Use transparent backgrounds when patterns need to sit over existing colors. Keep tile dimensions modest for compact generated code. Large custom paths can increase CSS size significantly. Minified output helps reduce copied production code. Always test strong patterns behind real text content. Readability should remain more important than decorative complexity.