# Geometric design: grids, shapes and pattern ideas

[Canonical HTML page](https://gradiently.design/guide/geometric-design)

Circles, squares, stripes and grids are the oldest tools in graphic design, and still the most dependable. A working guide to grids, shape choices and pattern ideas, with code you can paste.

## The short version

- Geometric design builds images and layouts from regular shapes such as circles, squares, triangles and straight lines, usually arranged on a grid.
- A grid with consistent margins, columns and gutters is what makes geometric layouts feel ordered rather than merely angular.
- Circles tend to read as friendly and complete, squares as stable, and triangles as directional and energetic.
- Stripes, checks, dots, rays and rings can all be drawn with CSS gradients, without any image files.
- Geometric patterns work best in two or three colours with one clear scale, so they support content instead of competing with it.

**Geometric design** builds visuals from regular shapes (circles, squares, triangles and straight lines) placed on a grid. It is the language of the Bauhaus, Swiss posters, Art Deco and most modern logos. It feels ordered, confident and timeless because the rules are visible: things line up, repeat and relate. Below is how to set up the grid, choose shapes on purpose, and make geometric patterns, including several you can draw in pure CSS.

## Start with a grid layout

Shapes alone don't make a design geometric; alignment does. A grid gives every element a place: margins around the edge, columns across the frame, and gutters between them. Once it exists, every circle, block and line of text snaps to it, and the whole design starts to feel built.

| Format | Size | Margin | Grid |
| --- | --- | --- | --- |
| Instagram post | 1080×1350 | 72 px | 6 columns, 24 px gutters |
| Square post | 1080×1080 | 72 px | 6 columns, 24 px gutters |
| Story | 1080×1920 | 72 px sides, 250 px top and bottom | 4 columns, 24 px gutters |
| A4 poster at 300 dpi | 2480×3508 | 177 px (15 mm) | 12 columns, 59 px gutters |
| Website hero | 1920×1080 | 120 px | 12 columns, 32 px gutters |

Starting grids for common formats. They are not rules from any platform, just sensible defaults: adjust them, then stick to them across a series.

The masters of this approach were the Swiss designers of the 1950s and 1960s, whose posters still look current. [Swiss design](https://gradiently.design/guide/swiss-design) covers their methods, and [Bauhaus design](https://gradiently.design/guide/bauhaus-design) shows where the love of circle, square and triangle began.

## Choosing shapes on purpose

Each basic shape carries associations that are widely used in design teaching, though none are absolute. Use them as tendencies, and let the colour and context do the rest.

- **Circle:** complete, friendly, focused. Good for highlighting one thing, such as a date or a face.
- **Square and rectangle:** stable, honest, structural. The natural container for text and images.
- **Triangle:** directional and energetic. Points the eye, implies movement or tension.
- **Line and stripe:** rhythm and speed. Horizontal feels calm, diagonal feels dynamic.
- **Semicircle and quarter circle:** soften a strict layout while staying geometric, a favourite of modern posters.

A portrait poster split vertically into two blocks, with a lecture title aligned on one side

A split layout: one strong vertical division, text locked to the grid on one side.

A portrait post with a large figure reading 12 columns and a small aligned detail line

A big number set on the grid. Scale contrast between figure and detail is a classic geometric move.

## Geometric pattern ideas

Patterns are geometric design at its most visible. The classics are stripes, checks, dots, rays, rings, chevrons and grids of lines. Keep to two or three colours, choose one scale, and decide whether the pattern is the hero (a poster, a wrapping paper) or a quiet background, in which case lower its contrast a lot.

- Diagonal stripes: `repeating-linear-gradient(45deg, #1e3a8a 0 24px, #f5efe3 24px 48px)`
- Awning stripes: `repeating-linear-gradient(90deg, #c2410c 0 40px, #fed7aa 40px 80px)`
- Target rings: `repeating-radial-gradient(circle at 50% 50%, #0f172a 0 18px, #fbbf24 18px 36px)`
- Sunburst rays: `repeating-conic-gradient(from 0deg at 50% 100%, #b91c1c 0deg 7.5deg, #fef3c7 7.5deg 15deg)`
- Quartered square: `conic-gradient(from 90deg at 50% 50%, #111827 0deg 90deg, #e5e7eb 90deg 180deg, #111827 180deg 270deg, #e5e7eb 270deg 360deg)`
- Ruled lines: `repeating-linear-gradient(0deg, #f8fafc 0 31px, #94a3b8 31px 32px)`

Six geometric patterns drawn entirely with CSS gradients. Hard colour stops (the same position twice) give crisp edges instead of blends.

Art Deco took rays, fans and stepped forms in gold and black; Memphis broke the grid with squiggles and confetti. [Art deco design](https://gradiently.design/guide/art-deco-design) and [Memphis design](https://gradiently.design/guide/memphis-design) are both rich sources if you want a pattern with a period flavour.

## Checks, dots and grids in CSS

Some patterns need the tile size set separately with `background-size`, so they repeat across a whole element. These three are the most requested. The [css patterns](https://gradiently.design/guide/css-patterns) article has many more, and [repeating linear gradient](https://gradiently.design/guide/css-repeating-gradient) explains hard stops in detail.

```css
/* Checkerboard: one conic gradient, tiled */
.checks {
  background: repeating-conic-gradient(#111827 0 25%, #f3f4f6 0 50%) 0 0 / 48px 48px;
}

/* Polka dots */
.dots {
  background-color: #fef3c7;
  background-image: radial-gradient(circle, #b45309 6px, transparent 7px);
  background-size: 32px 32px;
}

/* Graph paper grid */
.grid {
  background-color: #f8fafc;
  background-image:
    linear-gradient(#cbd5e1 1px, transparent 1px),
    linear-gradient(90deg, #cbd5e1 1px, transparent 1px);
  background-size: 24px 24px;
}
```

Checkerboard, dots and graph paper. Change the colours and the tile size; leave the structure alone. The 1px difference in the dots softens their edge.

## Geometric design ideas to try this week

- **One big circle:** a single circle filling half a poster, with the event date set inside it.
- **Stripe border:** a band of awning stripes along the top of a menu or price list, nothing else patterned.
- **Quarter circle corners:** a quarter circle in each corner of a square post, in two alternating colours.
- **Number on the grid:** a huge figure (a year, a price, a count of days) aligned to the left column, small text beside it.
- **Sunburst behind a product:** low contrast rays radiating from behind a bottle or box on a shop banner.
- **Graph paper notes:** a tip carousel on a faint grid background, each slide with one rule written on it.

Each idea uses one geometric device and leaves the rest plain. That is usually enough to give a post a clear point of view, and it is easy to repeat across a whole series.

## Keeping geometric designs readable

### Avoid

- High contrast pattern directly behind text
- Five colours in one pattern
- Shapes that almost align but miss the grid
- Fine stripes that shimmer on screens
- Mixing three unrelated pattern scales

### Do

- A solid or calm block wherever words sit
- Two or three colours, one dominant
- Everything snapped to the same grid
- Stripes at least 8 px wide at post size
- One pattern scale, repeated with confidence

Fine, high contrast stripes can flicker on screens and turn to moiré when an app resizes your image, so test at the size people will actually see. Geometric order also pairs well with one soft element: a single [organic shape](https://gradiently.design/guide/organic-shapes-design) on a strict grid adds warmth without breaking the system. In Gradiently, the Designer can lay out a post on a clean grid in your brand's Mark and make every other size from it, so the alignment survives each format.

## FAQ

### What is geometric design?

A style of graphic design built from regular shapes like circles, squares, triangles and lines, usually aligned to a grid.

### How do I make a geometric pattern in CSS?

Use repeating gradients with hard colour stops, such as `repeating-linear-gradient(45deg, #1e3a8a 0 24px, #f5efe3 24px 48px)` for stripes. For checks and dots, add `background-size` to set the tile.

### What grid should I use for an Instagram post?

A 1080×1350 post works well with 72 pixel margins and six columns with 24 pixel gutters. Use the same grid for every post in a series.

### Which design movements use geometric shapes?

The Bauhaus, Swiss or International Typographic Style, Art Deco and Memphis all relied heavily on geometric shapes, each in a very different spirit.