---
title: "Halftone Dot Shader — Free Framer component · Best of Framer"
description: "Free Framer component · by Artem Kireev · Effects. Halftone shading for any image."
canonical: "https://framer.elliotli.dev/component/halftone-dot-shader"
---

[Home](/)/[Components](/components)/[Effects](/components/category/effects)/Halftone Dot Shader

# Halftone Dot Shader

Halftone shading for any image.

[View on Framer](https://framer.com/marketplace/components/halftone-dot-shader/?via=elliot-li)

![Halftone Dot Shader preview image 1](https://framer.elliotli.dev/og/component/halftone-dot-shader/85dd4f8c20e91b0d/1600x1243.jpg)

## Summary

Halftone shading for any image.

## Description

## Customizations available in Framer

-   **Source** — switch between a built-in animated gradient and your own image as the input the halftone reads luminance from.
    
-   **Image** — the image to run the effect over (only shown when Source is set to Image).
    
-   **Ink (dark)** — dot color used for the darkest areas of the source.
    
-   **Ink (light)** — dot color used for lighter areas; blended with Ink (dark) across the luminance range.
    
-   **Background** — the color behind the dots.
    
-   **Shape** — dot grid mark: Circle, Square, or Line screen.
    
-   **Density** — grid cell size in pixels; lower values pack the dots tighter.
    
-   **Angle** — rotation of the dot grid, in degrees.
    
-   **Contrast** — pushes source luminance toward pure black/white before it drives dot size, for punchier or softer results.
    
-   **Animate** — toggles the gentle time-based drift on or off (also automatically respects the visitor's OS-level reduced-motion setting).
    
-   **Speed** — playback speed of the animation (shown only when Animate is on).
    
-   **Wave amount** — how much the source and grid ripple/drift over time (shown only when Animate is on).
    
-   **Mouse reactive** — toggles a soft cursor-follow highlight in the pattern.
    
-   **Mouse strength** — intensity of the cursor highlight (shown only when Mouse reactive is on).
    

## Use cases

-   A portfolio or agency site hero section that turns a plain brand-color gradient into a textured, print-inspired backdrop instead of a flat fill.
    
-   A photography or editorial site that runs a hero or case-study image through the effect for a stylized, art-directed treatment rather than showing the raw photo.
    
-   A product landing page section background that stays subtly alive (slow drift, cursor reaction) without competing with foreground text, using low Density/Wave/Contrast settings for a quiet effect.
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #1848

## Details

- **Author**: Artem Kireev
- **Published**: 2026-08-12
- **Updated**: 2026-08-12
- **Added**: 2026-08-12
- **Categories**: Effects

## More like this

-   [Liquid Glass Loupe](/component/liquid-glass-loupe) — Aisol Studio · $12 — Liquid glass lens over content
-   [Sticky Scenes](/component/sticky-scenes) — Sofía Martín · $5 — Scroll-driven stories with sticky
-   [Studio ASCII Reveal](/component/studio-ascii-reveal) — Tanmay Kaper · $12 — Your portrait, redrawn in ASCII
-   [Kinetic Sprout](/component/kinetic-sprout) — Buster Studios · $19 — A headline that grows