<half-tone>

Return to the GitHub repo.

A simple web component to apply a halftone filter to an image.

<half-tone>
  <img src="..." alt="..." />
</half-tone>

You can configure the filter by setting any of the following attributes on the <half-tone> element.

• dot-size 4px
• dot-color
• dot-contrast 2000%
• dot-angle 15deg
• photo-brightness 80%
• photo-contrast 120%
• photo-blur 2px
• blend-mode normal multiply screen overlay darken lighten color-dodge color-burn hard-light soft-light difference exclusion hue saturation color luminosity

Frequently Asked Questions

How does this work?

If you'd like to know more about the CSS behind this filter, you can check out this blog post!

Can you make a version that does halftone colors?

I'm probably not going to add that here, because this is powered by a really simple set of CSS filters. You may be interested in <img-halftone>, which has a more advanced feature set.

Technically, halftone is one word.

That's not a question, but correct! However, web components are required to have a hyphen, and I like half-tone better than halftone-image.

Return to the GitHub repo.

Photo by Connor Wilkins on Unsplash.