Help
Page Patterns makes pattern backgrounds for the sections of a website. These pages explain every control, with pictures of what each one does to the pattern.
Make your first pattern
- Pick a look in the Looks panel on the left. Switch on Use my colours to see every look in your colours.
- Set your colours in the bar above the canvas. The square swatch is the background. The round chips are the shape colours.
- Choose the placement (Hero, CTA banner, Section, Card, Footer, Social image or Phone) and where your text sits. The sample text shows how the pattern sits behind a headline, and a clear zone keeps it readable. It is only a guide and is never exported.
- Adjust Opacity and Scale in the same bar. Everything else is under Fine-tune (press \).
- Click Use on my site. Copy the prompt into your AI coding tool, or take the SVG, HTML, React, Tailwind or image file. See Use on your site.
The bar above the canvas
The controls you need most sit in one bar above the canvas. On a phone the bar runs under the canvas.
| Control | What it does |
|---|---|
| Placement | What the pattern is for. It sets the size of the artboard: Hero 1440 × 640, CTA banner 1240 × 280, Section 1440 × 900, Card 600 × 400, Footer 1440 × 360, Social image 1200 × 630 and Phone 390 × 844, or any custom size. |
| Background | The section colour: a solid colour, a gradient, or transparent so your own background shows through. |
| Shape colours | The round chips. Click one to change it. The plus button adds a colour, up to six. |
| Opacity | How visible the pattern is, from Subtle to Bold. |
| Scale | How big the shapes are, from Fine to Large. |
| Text position | Where your headline sits: left, centre or right. The pattern clears behind it. |
| Shuffle | A new arrangement of the same pattern. The shortcut is S. |
Opacity
Background patterns work best when they are quiet. Subtle suits sections full of text, Bold suits a short headline on a large hero. In between, the slider blends the two.
The slider sets a range rather than one value, because each shape gets its own opacity. Even Bold stays well short of 100% (about 6% to 22% for most shapes), since a background pattern should never compete with your text. Point at the slider to see the range it has set. For a stronger pattern, set each end of the range under Fine-tune, Opacity, up to 100%.
Scale
Scale sets the size of each shape. Small shapes read as a texture; large ones read as a graphic. Fine-tune, Shape sets the exact size in pixels.
Text position
Text position marks where your headline and buttons sit, then clears the pattern behind them, fading it back in around the edges. Drag the sample text on the canvas to move the clear area with it.
The sample text is a placeholder. It shows where your words will go and how much room they take, so you can judge how quiet the pattern needs to be behind them. That is why you can't edit it or change its colour: it turns light or dark by itself to suit your background, as most real headlines would. It is never exported. The SVG and image hold only the pattern, and your AI tool puts in your real text when it builds the section. The HTML code under Use on my site has an example headline and button to show where your content goes; replace them with your own. To hide the sample text while you work, untick Show sample text in the same menu.
Fine-tune
Fine-tune opens a drawer with every setting, in groups. Each group has a help button, and the less used settings sit under More options.
| Shape | The shape, its size and gap, fill style, stretch, rotation and jitter. |
| Halftone dots | Dot spacing and size, the size field that makes dots grow and shrink, and the fill shape. |
| Textures | Lines (straight, wavy or diagonal), topography contours and tiny checkers: line width, waviness, direction and square size. |
| Colour | Shape colours, how they are spread, and the background. |
| Opacity | The opacity range, how many shapes show, and how opacity varies across the pattern. |
| Variation | Size and rotation that change from shape to shape. |
| Effects | Gradient fills, lighting, sheen and grain. |
| Zones | Areas where the pattern is quieter or stronger. |
| Hand edits and tracing | Switching single shapes off, painting with the brush, and tracing a screenshot. |
Where your work is saved
- New, at the top left, starts a fresh design for the placement you pick, or at a custom size. Undo brings back the design you had. On a phone, New is in the menu.
- Autosave keeps your current design in this browser. Nothing is sent anywhere.
- Save project in the menu (click the Page Patterns name) downloads a
.pattern.jsonfile. Open project loads one, or drop the file on the canvas. - Share link stores the whole design inside the link itself. Anyone who opens it gets your design. Nothing is uploaded.