Progressive Blur Style

Advanced layered blur effects for web elements. Create iOS/Windows-style blur overlays with multiple customizable layers.

Features

• 4-Layer System - Blur, Luminosity, Tint, and Noise layers
• Advanced Tint System - Solid colors or linear gradients with individual opacity
• Custom Cubic-Bezier Curves - Full curve customization for feathering
• Luminosity Layer - Brightness, contrast, saturation adjustments
• Noise Layer - Grain effects like Windows blur
• High Performance - Uses CSS backdrop-filter and mask

Installation

npm install progressive-blur-style

Or include the script directly in your HTML:

<script src="progressive-blur-style.js"></script>

Quick Start

HTML Structure

<div class="container">
  <div class="blur-overlay" id="myBlur"></div>
</div>

CSS Setup

.container {
  position: relative;
  background-image: url('your-image.jpg');
  background-size: cover;
  width: 100%;
  height: 400px;
}

.blur-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

JavaScript

progressiveBlurStyle(document.getElementById('myBlur'), {
  blur: {
    enabled: true,
    direction: 'bottom',
    height: '50%',
    maxBlur: 200
  },
  tint: {
    enabled: true,
    color: '#ffffff',
    opacity: 0.1
  }
});

API Reference

Main Function

progressiveBlurStyle(target, options)

| Parameter | Type | Description | |-----------|------|-------------| | target | HTMLElement | Target DOM element for blur overlay | | options | Object | Configuration options |

Options Structure

{
  blur: { /* Blur layer settings */ },
  luminosity: { /* Luminosity layer settings */ },
  tint: { /* Tint layer settings */ },
  noise: { /* Noise layer settings */ }
}

Layer Options

Blur Layer

| Option | Type | Default | Description | |--------|------|---------|-------------| | enabled | Boolean | true | Enable/disable blur | | direction | String | 'bottom' | 'top', 'bottom', 'left', 'right' | | height | String | '60%' | Height of blur area | | layers | Number | 8 | Number of blur layers (3-20) | | maxBlur | Number | 40 | Maximum blur in pixels | | startOpacity | Number | 0 | Starting opacity (0-1) | | endOpacity | Number | 1 | Ending opacity (0-1) | | position | String | 'bottom' | 'top' or 'bottom' | | curve | Array/String | [0.25, 0.46, 0.45, 0.94] | Cubic-bezier or preset |

Luminosity Layer

| Option | Type | Default | Description | |--------|------|---------|-------------| | enabled | Boolean | false | Enable/disable | | brightness | Number | 1.1 | Brightness (0-2) | | contrast | Number | 1.05 | Contrast (0-2) | | saturate | Number | 1.2 | Saturation (0-3) | | opacity | Number | 0.8 | Layer opacity | | blendMode | String | 'normal' | CSS blend mode |

Tint Layer

| Option | Type | Default | Description | |--------|------|---------|-------------| | enabled | Boolean | false | Enable/disable | | color | String | '#ffffff' | Solid color | | gradient | Object | null | Gradient configuration | | opacity | Number | 0.1 | Layer opacity | | blendMode | String | 'overlay' | CSS blend mode |

Noise Layer

| Option | Type | Default | Description | |--------|------|---------|-------------| | enabled | Boolean | false | Enable/disable | | opacity | Number | 0.3 | Layer opacity | | blendMode | String | 'multiply' | CSS blend mode |

Examples

iOS Style

progressiveBlurStyle(element, {
  blur: {
    enabled: true,
    direction: 'top',
    height: '40%',
    layers: 6,
    maxBlur: 130,
    position: 'top',
    curve: [0.62, 0.123, 0.92, 0.002]
  },
  luminosity: {
    enabled: true,
    brightness: 1,
    contrast: 1.2,
    saturate: 1.3
  },
  tint: {
    enabled: true,
    color: '#000000',
    opacity: 0.75
  }
});

Windows Blur

progressiveBlurStyle(element, {
  blur: {
    enabled: true,
    height: '100%',
    layers: 4,
    maxBlur: 200,
    startOpacity: 1,
    endOpacity: 1,
    curve: 'linear'
  },
  luminosity: {
    enabled: true,
    brightness: 1.1,
    saturate: 1.2
  },
  noise: {
    enabled: true,
    opacity: 1,
    blendMode: 'overlay'
  }
});

Glass Morphism

progressiveBlurStyle(element, {
  blur: {
    enabled: true,
    height: '33%',
    layers: 3,
    maxBlur: 300,
    curve: [0.09, 0.93, 0.7, 0.01]
  }
});

Update and Destroy

const blurEffect = progressiveBlurStyle(element, options);

// Update settings
blurEffect.update({
  blur: { maxBlur: 300 }
});

// Remove effect
blurEffect.destroy();

Browser Support

| Browser | Version | |---------|---------| | Chrome | 76+ | | Firefox | 103+ | | Safari | 14+ | | Edge | 79+ |

Requires backdrop-filter support.

License

MIT License