kitzos

SVG Pattern Generator

Create repeating SVG background patterns and copy the CSS code.

Pattern

background-color: #ffffff;
background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%223%22%20fill%3D%22%232563eb%22%2F%3E%3C%2Fsvg%3E");

How to use

  1. 1

    Pick a pattern

    Choose dots, lines, or grid style.

  2. 2

    Adjust colors and tile size

    Fine-tune pattern and background colors.

  3. 3

    Copy CSS

    Paste the background CSS into your project.

Frequently Asked Questions

Yes. It is embedded as a data-URI SVG in the CSS background.

Related tools

QR Code Generator

Generate QR codes from text or URLs. Download as PNG or SVG.

JSON Formatter

Format, validate, and minify JSON with clear error messages.

Base64 Encoder / Decoder

Encode and decode text or images to Base64. Works entirely offline.

Color Picker

Pick a color and convert between HEX, RGB, and HSL formats.

Timestamp Converter

Convert Unix timestamps to dates and back. Supports seconds and milliseconds.

Hash Generator

Generate MD5, SHA-1, SHA-256, and SHA-512 hashes from any text.

Open Graph Image GeneratorNew

Create 1200×630 OG images for social sharing with custom title and colors.

Favicon GeneratorNew

Generate favicon PNGs in multiple sizes from one image and download as ZIP.

Box Shadow GeneratorNew

Design CSS box shadows with live preview and copy ready-to-use code.

Signature Generator PNGNew

Draw a transparent signature and download as PNG for documents and forms.

Color Palette GeneratorNew

Generate complementary, analogous, and triadic color palettes from a base color.

Glassmorphism GeneratorNew

Design frosted-glass CSS effects with live preview. Copy blur, border, and background code.