---
url: /api/effects/pixelate/functions/pixelate.md
---
# pixelate()

```ts
function pixelate(params?: { size?: number }): EffectPass<{
  uTexture: (__namedParameters: Readonly<EffectUniformContext>) => WebGLTexture;
  uResolution: (
    __namedParameters: Readonly<EffectUniformContext>,
  ) => [number, number];
  uSize: number;
  uDpr: (__namedParameters: Readonly<EffectUniformContext>) => number;
}>;
```

Creates a pixelate post-processing effect that snaps the image to a grid of
square blocks.

The effect samples the input once per block at its center, so it costs a
single full-screen pass with one texture fetch and needs no extra render
target.

## Parameters

### params?

Pixelate configuration.

#### size?

`number`

Size of each pixel block in CSS pixels. The value is independent of the
device pixel ratio, so the result looks the same on any display.

You can dynamically update the value:

* pixelateEffect.uniforms.uSize = 16; // coarser pixelation
* pixelateEffect.uniforms.uSize = 1; // back to the original image

**Default**

```ts
8;
```

## Returns

[`EffectPass`](../../../passes/effectPass/type-aliases/EffectPass.md)<{
`uTexture`: (`__namedParameters`: `Readonly`<[`EffectUniformContext`](../../../passes/effectPass/type-aliases/EffectUniformContext.md)>) => `WebGLTexture`;
`uResolution`: (`__namedParameters`: `Readonly`<[`EffectUniformContext`](../../../passes/effectPass/type-aliases/EffectUniformContext.md)>) => \[`number`, `number`];
`uSize`: `number`;
`uDpr`: (`__namedParameters`: `Readonly`<[`EffectUniformContext`](../../../passes/effectPass/type-aliases/EffectUniformContext.md)>) => `number`;
}>

## Remarks

For a smoother pixelated look that is also cheaper, render the scene into a
small texture and upscale it with `magFilter: "nearest"`. Downsampling
averages the source, so the blocks keep more detail, and far fewer fragments
are shaded. On a canvas rendered at a low `dpr`, `image-rendering: pixelated`
gives the same blocky look with no shader pass at all.