SVG Pattern Generator

Create custom SVG patterns for hero backgrounds, section patterns, or product card overlays. Copy the SVG code or export as CSS to use in your Blogger site.

Live Preview

Output

SVG Markup

CSS Snippet

Base64 Data URI

Controls

Pattern Type

Primary Color

Secondary Color

Background Color

Scale 50

Spacing 10

Rotation

Opacity 0.8

Stroke Width 2

Randomness

Animation

Animation Speed (s) 5

Use Gradient

Gradient Angle 45

Gradient Stop 1

Gradient Stop 2

Blend Mode

Saved Patterns

Patterns are saved to your browser's local storage.

SVG Pattern Generator

Live Preview

Output

Controls

Presets

Saved Patterns

Import/Export