Backgrounds

Halftone Dot Gradient

A print-style halftone screen whose dots genuinely shrink across the section, like a Ben-Day tone fading to paper. Gives editorial, comic, or print-brand sections real texture instead of a flat gradient, with zero client-side JS.

Subscription Included with the Velocity Components subscription.

bash

$ velocityx add halftone-dot-gradient

Built for astro.

Needs a licence key — subscribe here, then velocityx loginonce.

astro v1.0.1

Halftone Dot Gradient

Props

Name	Type	Required	Default
direction	'horizontal' \| 'vertical' \| 'diagonal'	No	'horizontal'
color	'primary' \| 'accent' \| 'ink'	No	'ink'
density	number	No	22
opacity	number	No	0.5
class	string	No	''

File this creates

The CLI writes this path into your project, relative to its root — nothing else moves.

text

components/velocity/halftone-dot-gradient/HalftoneDotGradient.astro

Using the Halftone Dot Gradient component

Install it with velocityx add halftone-dot-gradient. The CLI writes the source straight into your project — no runtime dependency, no registry lock-in, and it themes itself from the same primary-*/accent-* scale as the rest of the library.

All 406 components

Halftone Dot Gradient

Props

File this creates

Using the Halftone Dot Gradient component

Related components