THE WORKBENCH / Brighter Workshop

Pattern Studio

Explore repeatable two-color patterns with scale controls and downloadable CSS and PNG output.

Read our Privacy policy for how tool inputs and visit data are handled, and our Terms of use for reuse permissions and resource limitations.

Make a repeat.

Pattern

Marks: #5c7054

Background: #f2ebd9

Repeat tile: 24 CSS px

The PNG uses the same numeric scale in image pixels. It exports a 1024 × 768 image.

Try a palette and rhythm.

Presets are illustrative design starting points. A pattern is not a contrast or accessibility certification.

A pattern with room to play.

See the CSS

/* Brighter Workshop: dots, repeat tile 24px */
.pattern {
  background-color: #f2ebd9;
  background-image: radial-gradient(circle at 50% 50%, #5c7054 0 3.3600000000000003px, transparent 3.3600000000000003px);
  background-size: 24px 24px;
}