ChromaticBlur.js Plugin Demo

This page demonstrates the ChromaticBlur.js plugin — a modern, vanilla JavaScript solution for creating chromatic aberration blur effects (≈2.1 KB gzipped). The navigation bar above uses the plugin with default settings.

Try scrolling to see how the background texture interacts with the blur effect.

📦 unpkg 🚀 jsDelivr npm Star on GitHub

Live Controls

Red Offset: 5 px

Blue Offset: -5 px

Blur Amount: 3

Displacement Scale: 50

Subtle Effect

Low offset, minimal blur

const subtle = new ChromaticBlur('.card-1', {
  redOffset: 2,
  blueOffset: -2,
  blurAmount: 2
});

Medium Effect

Balanced settings

const medium = new ChromaticBlur('.card-2', {
  redOffset: 5,
  blueOffset: -5,
  blurAmount: 4
});

Intense Effect

High offset, maximum blur

const intense = new ChromaticBlur('.card-3', {
  redOffset: 12,
  blueOffset: -12,
  blurAmount: 8,
  displacementScale: 100
});

Usage Example

// Initialize with default settings
const blur = new ChromaticBlur('.navbar');

// Or with custom options
const blur2 = new ChromaticBlur('.navbar', {
  redOffset: 8,
  blueOffset: -8,
  blurAmount: 5,
  displacementScale: 75
});

// Update dynamically
blur.update({ redOffset: 10 });

// Cleanup
blur.destroy();

Key Features

🎨 Beautiful chromatic aberration with color channel splitting

🪶 Zero dependencies - pure vanilla JavaScript

⚡ Lightweight and performant (≈2.1 KB gzipped)

🔧 Highly configurable with sensible defaults

🔗 Method chaining support

🧹 Automatic cleanup and memory management

♿ Accessible (screen reader friendly)

🌐 ES6 module with CommonJS/AMD/UMD support

🌐 Browser Compatibility: Full chromatic aberration effect works in Chrome/Edge. Safari and Firefox have limited backdrop-filter: url() support and automatically fall back to a simpler Gaussian blur effect.

How It Works

The ChromaticBlur effect uses a sophisticated SVG filter pipeline to create realistic chromatic aberration:

SVG Filter Pipeline

feTurbulence - Noise Generation
Creates organic Perlin noise pattern with low frequency (0.001) for smooth, natural variations. Used as the displacement map source.
feOffset + feColorMatrix - RGB Channel Separation
Red channel shifts right (+5px), green stays centered, blue shifts left (-5px). Color matrices isolate each channel independently.
feComposite - Channel Recombination
Arithmetic blending (k2=1, k3=1) additively merges the separated RGB channels back together, creating the characteristic color fringing.
feDisplacementMap - Organic Distortion
Applies turbulence-based displacement with scale parameter (default 50) for wavy, organic edge distortion.
feGaussianBlur - Final Softening
Gaussian blur with stdDeviation=3 creates the characteristic "out of focus" chromatic aberration look.

Application Method

The SVG filter is applied via CSS backdrop-filter: url(#filter-id) for modern glassmorphism effects, with fallback to direct filter application for Safari/Firefox compatibility. Additional gradient and noise overlay layers enhance visual depth.