---
title: "Dither Grain Overlay — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Artem Kireev · Effects. Description Dither Grain Overlay is a WebGL2 shader component that generates an animated dithered grain or halftone texture and lays it over…"
canonical: "https://framer.elliotli.dev/component/dither-grain-overlay"
---

[Home](/)/[Components](/components)/[Effects](/components/category/effects)/Dither Grain Overlay

# Dither Grain Overlay

Animated dither & grain, anywhere

[View on Framer](https://framer.com/marketplace/components/dither-grain-overlay/?via=elliot-li)

![Dither Grain Overlay preview image 1](https://framer.elliotli.dev/og/component/dither-grain-overlay/57e19287331ffeb7/1600x1243.jpg)

## Summary

Description Dither Grain Overlay is a WebGL2 shader component that generates an animated dithered grain or halftone texture and lays it over (or behind) any section of a site.

## Description

## Description

Dither Grain Overlay is a WebGL2 shader component that generates an animated dithered grain or halftone texture and lays it over (or behind) any section of a site. Most shader backgrounds on the Framer marketplace are locked to one look and one placement — a hero, a full-page fill. This one is built as a general-purpose texture layer: drop it on a card, a footer, a full section, or the whole page, and it adapts to whatever sits beneath it because it can render as a transparent overlay or an opaque background.

It solves the "every shader site looks the same" problem by giving four distinct dithering algorithms (Bayer ordered dither, fine noise grain, blue-noise-style grain, and halftone dots), each with independently tunable density, animation speed, distortion, and color, so two sites using this component rarely look alike.

## Customizations available in Framer

-   **Pattern** — switches between Bayer Dither, Noise Grain, Blue Noise, and Halftone Dots algorithms.
    
-   **Layer Mode** — Overlay (transparent, stacks on top of other layers) or Background (opaque fill).
    
-   **Intensity** — overall strength/density of the dither or grain.
    
-   **Scale** — size of the pattern cells, from fine grain to chunky dots.
    
-   **Speed** — animation speed; 0 fully freezes the effect and stops the render loop.
    
-   **Distortion** — amount of animated warp applied to the pattern field.
    
-   **Color Mode** — Monochrome or Duotone.
    
-   **Color A** — primary color, and the static-render fallback fill.
    
-   **Color B** — secondary color for Duotone blending and the fallback gradient (hidden unless Duotone is selected).
    
-   **Opacity** — overall layer opacity.
    
-   **Blend Mode** — CSS blend mode (normal, multiply, screen, overlay, soft-light, difference) against whatever sits beneath it.
    
-   **Pause Offscreen** — stops rendering when scrolled out of view, for performance.
    

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

-   All · #3284

## Details

- **Author**: Artem Kireev
- **Price**: $5.00
- **Published**: 2026-08-18
- **Updated**: 2026-08-18
- **Added**: 2026-08-18
- **Categories**: Effects

## More like this

-   [Particle Image](/component/particle-image) — Jamik · $12 — Logos and photos as 3D points
-   [Ascii Portrait](/component/ascii-portrait) — The Black Sheep · Free — Photos that dissolve into ASCII
-   [Sandfall](/component/sandfall) — Cyedi Creative Studio · $5 — Your headline, buried in coloured
-   [Still Water](/component/still-water) — DariStudio · $9 — Water ripples over any photo