---
title: "Image Dither Effect — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Ali Çorak · Effects. Striking retro-dithered visual"
canonical: "https://framer.elliotli.dev/component/image-dither-effect"
---

[Home](/)/[Components](/components)/[Effects](/components/category/effects)/Image Dither Effect

# Image Dither Effect

Striking retro-dithered visual

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

![Image Dither Effect preview image 1](https://framer.elliotli.dev/og/component/image-dither-effect/d6ab03ecb02de84a/1600x1200.jpg)

## Summary

Striking retro-dithered visual

## Description

**Unlock entire Depth library for $149. One price. Lifetime.**

[**Get Depth**](https://depth.website/#all-access)

**\--------------------------------------------------------**

Turn any image into a striking retro-dithered visual — rendered live on the GPU, no pre-processed exports or heavy video files needed. Image Dither brings a classic halftone/dithering look to Framer, giving your site that gritty, print-inspired texture on demand.

**Features**

-   4 dithering patterns — Random, 2x2, 4x4, and 8x8 grid modes
    
-   Original Colors — sample colors straight from your source image, or override with custom ones
    
-   3-point color system — Background, Foreground, and Highlight colors for full control over the palette
    
-   Color Steps — dial the number of color bands from a hard 2-tone look up to a richer multicolor gradient
    
-   Grid Size — scale the dithering pattern from fine grain to bold, chunky pixels
    
-   Built in Paper style, running on a lightweight, zero-dependency shader engine for smooth performance
    

**Controls**

-   Image – Upload or link the source image
    
-   Dithering Type – Random / 2x2 / 4x4 / 8x8
    
-   Original Colors – Toggle to sample from the image or use custom colors
    
-   Background Color – Sets the base color
    
-   Foreground Color – Sets the primary dither color
    
-   Highlight Color – Sets the secondary dither color (match it to Foreground for classic 2-color dithering)
    
-   Size
    
-   Color Steps
    
-   Scale / Rotation / Offset
    

**How to use**

1.  Add the Image Dither component onto your canvas
    
2.  Upload the image you want to apply the effect to
    
3.  Toggle Original Colors on for a natural palette, or off to set your own Background, Foreground, and Highlight colors
    
4.  Adjust Dithering Type, Size, and Color Steps from the properties panel until you get the look you want
    

Shader powered by Paper Shaders.

**Refund Policy:**

Due to the nature of digital products, all sales are final. Once purchased, this component is non-refundable. Please make sure it fits your needs before completing the checkout.

Support: [hi@alicorak.com](mailto:hi@alicorak.com)

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

-   All · #8569

## Details

- **Author**: Ali Çorak
- **Price**: $5.00
- **Published**: 2026-07-03
- **Updated**: 2026-08-16
- **Added**: 2026-07-03
- **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