How is the halftone drawn without an image?

A radial-gradient paints one solid circle with a hard edge, and background-size repeats it as a tile. The spacing value is the tile size, and the dot size is the circle radius inside it.

What does the offset grid do?

It adds a second copy of the dot layer shifted by half the spacing in both directions. The dots then sit in a staggered, diagonal arrangement like a classic print screen, with twice the dot density.

How does the fade work?

The dots live on a ::before layer that gets a mask-image gradient. Where the mask is opaque the dots show fully, and where it is transparent they disappear. The dots do not shrink, they fade out. True size-graded halftone would need an image or SVG.

Can I put text or images on top of the pattern?

Yes. The dot layer is a pseudo-element with pointer-events: none, so anything you place inside the .halftone container stays clickable. If content ends up underneath the dots, give it position: relative and a z-index of 1.

Does it work in all browsers?

Radial gradients and background-size work everywhere. mask-image is supported in current browsers, and the CSS includes the -webkit- prefixed version for older Safari and Chromium releases.

CSS HALFTONE GENERATOR

Build a halftone dot pattern with a fade in pure CSS, then copy it.

In short

Build a halftone dot pattern in pure CSS — choose dot size, spacing, colors, an optional offset second grid, and a fade direction — and copy the CSS. It uses radial-gradient and mask-image, so no image file is needed, and it runs in your browser with no upload.

Spacing: 16px

Dot size: 4px

Dot color

Background color

Fade

Offset second grid

.halftone {
  position: relative;
  background-color: #201d19;
}

.halftone::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, #ff6a35 4px, transparent 4.5px), radial-gradient(circle, #ff6a35 4px, transparent 4.5px);
  background-size: 16px 16px;
  background-position: 0 0, 8px 8px;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000);
  mask-image: linear-gradient(to bottom, transparent, #000);
}

Example output (default settings)

HTML

<div class="halftone">
  <!-- your content here -->
</div>

CSS

.halftone {
  position: relative;
  background-color: #201d19;
}

.halftone::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, #ff6a35 4px, transparent 4.5px), radial-gradient(circle, #ff6a35 4px, transparent 4.5px);
  background-size: 16px 16px;
  background-position: 0 0, 8px 8px;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000);
  mask-image: linear-gradient(to bottom, transparent, #000);
}

How to build a CSS halftone pattern

1
Set the dot spacing and dot size to control how coarse the halftone looks.
2
Pick the dot color and background color.
3
Turn on the offset grid for a denser, staggered screen, and choose a fade direction if you want the dots to dissolve.
4
Copy the CSS and HTML and drop them into your page.

Questions

How is the halftone drawn without an image?: A radial-gradient paints one solid circle with a hard edge, and background-size repeats it as a tile. The spacing value is the tile size, and the dot size is the circle radius inside it.
What does the offset grid do?: It adds a second copy of the dot layer shifted by half the spacing in both directions. The dots then sit in a staggered, diagonal arrangement like a classic print screen, with twice the dot density.
How does the fade work?: The dots live on a ::before layer that gets a mask-image gradient. Where the mask is opaque the dots show fully, and where it is transparent they disappear. The dots do not shrink, they fade out. True size-graded halftone would need an image or SVG.
Can I put text or images on top of the pattern?: Yes. The dot layer is a pseudo-element with pointer-events: none, so anything you place inside the .halftone container stays clickable. If content ends up underneath the dots, give it position: relative and a z-index of 1.
Does it work in all browsers?: Radial gradients and background-size work everywhere. mask-image is supported in current browsers, and the CSS includes the -webkit- prefixed version for older Safari and Chromium releases.

Related tools

All Color & CSS Tools →

Updated October 12, 2026