Shader Atlas
한국어
◌ Blurs

Diffuse Blur

확산 블러

Random pixel displacement gives the image a grain-like, softened texture.

Also known as: DiffuseBlur

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

React
// Renders only in browsers with WebGPU.
// /samples/… are this site’s sample files — point them at your own image or video.
import { Shader, DiffuseBlur, ImageTexture } from 'shaders/react'

export default function ShaderEffect() {
  return (
    <Shader style={{ width: '100%', height: 320 }} disableTelemetry>
      <ImageTexture
        objectFit="cover"
        url="/samples/poster.jpg" />
      <DiffuseBlur
        intensity={8} />
    </Shader>
  )
}
Vue
<!-- Renders only in browsers with WebGPU. -->
<!-- /samples/… are this site’s sample files — point them at your own image or video. -->
<script setup lang="ts">
import { Shader, DiffuseBlur, ImageTexture } from 'shaders/vue'
</script>

<template>
  <Shader style="width: 100%; height: 320px" :disable-telemetry="true">
    <ImageTexture
      object-fit="cover"
      url="/samples/poster.jpg"/>
    <DiffuseBlur
      :intensity="8"/>
  </Shader>
</template>
Svelte
<!-- Renders only in browsers with WebGPU. -->
<!-- /samples/… are this site’s sample files — point them at your own image or video. -->
<script>
  import { Shader, DiffuseBlur, ImageTexture } from 'shaders/svelte'
</script>

<Shader style="width: 100%; height: 320px" disableTelemetry>
  <ImageTexture
    objectFit="cover"
    url="/samples/poster.jpg" />
  <DiffuseBlur
    intensity={8} />
</Shader>
Solid
// Renders only in browsers with WebGPU.
// /samples/… are this site’s sample files — point them at your own image or video.
import { Shader, DiffuseBlur, ImageTexture } from 'shaders/solid'

export default function ShaderEffect() {
  return (
    <Shader style={{ width: '100%', height: '320px' }} disableTelemetry>
      <ImageTexture
        objectFit="cover"
        url="/samples/poster.jpg" />
      <DiffuseBlur
        intensity={8} />
    </Shader>
  )
}
JavaScript
// Renders only in browsers with WebGPU.
// /samples/… are this site’s sample files — point them at your own image or video.
// expects <canvas id="canvas" style="width:100%;height:320px"></canvas> on the page
import { createShader } from 'shaders/js'

const shader = await createShader(document.getElementById("canvas"), {
  components: [
    {
      type: 'ImageTexture',
      props: {
        objectFit: 'cover',
        url: '/samples/poster.jpg',
      },
    },
    {
      type: 'DiffuseBlur',
      props: {
        intensity: 8,
      },
    }
  ]
}, { disableTelemetry: true })

Props · DiffuseBlur

Changes apply to the demo above and to the code tabs. Descriptions come from the library registry (MIT).

NameValueDefaultRange / optionsDescription
intensityIntensity300 – 100 (step 1)Intensity of the diffuse blur effect
edgesEdgesstretchstretch · transparent · mirror · wrapHow to handle edges when distortion pushes content out of bounds

Every component also takes blendMode · opacity · visible · maskSource/maskType · boundingBox · id

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Blur가우시안 블러

A uniform Gaussian blur softens edges and fine detail across the image.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Progressive Blur점진적 블러

Blur strength changes gradually across the image in one direction.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Tilt Shift틸트 시프트 블러

A narrow focus band stays sharp while areas beyond it become progressively blurred.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Linear Blur방향성 블러

A directional blur stretches image detail along a chosen angle.

Instead of simply losing focus, pixels scatter into a fine, grain-like texture. It can feel like a lightly blurred grain on paper.

`intensity` defaults to 30 and ranges from 0 to 100 to control the strength of the random displacement. `edges` defaults to stretch and chooses how edges are handled when displacement pushes content out of bounds.

Place it over an image or video input. Higher values can roughen outlines and text, so limit it to a background that needs texture. Combining it with a smooth blur can balance softness with grain.

When to use

Use it for textured backgrounds, paper- or film-like surfaces, or to add irregularity to a smooth image. Avoid it when small text or fine patterns must stay crisp.

Open as page ↗