progressive-acrylic

Progressive Acrylic

🎨 Advanced layered acrylic glass and progressive (guassian) blur effects for web elements. Create iOS/Windows-style acrylic blur overlays with multiple customizable layers: blur, luminosity, tint, and noise.

Progressive Acrylic Editor | Docs

I created an interactive editor since it might be challenging for beginners to use the library directly.

🎯 Project Purpose

Progressive Acrylic aims to bring sophisticated acrylic glass and progressive blur effects to web interfaces, inspired by both iOS and Windows design languages. The library provides a powerful yet easy-to-use solution for creating layered blur effects that can enhance the visual hierarchy and depth of web applications.

The project focuses on:

• Creating natural, iOS-style progressive blur transitions
• Implementing Windows Acrylic material design principles
• Providing granular control over each visual layer
• Maintaining high performance through CSS optimizations

📖 Project Background

This project started as an iOS-style progressive blur implementation, inspired by projects like Glur which creates beautiful progressive blur effects in SwiftUI.

Progressive blur creates a natural feathering effect where the blur intensity gradually increases, mimicking the depth of field effect seen in iOS interfaces.

Multiple progressive blur layers working together

Later, the project evolved to implement Microsoft Windows Acrylic design language, following the official Windows Acrylic Material guidelines. The Windows acrylic system uses a sophisticated 4-layer approach that combines blur, luminosity adjustments, color tinting, and noise texture to create the distinctive frosted glass appearance.

The Windows Acrylic layer system: Desktop background → Gaussian blur → Luminosity blend → Tint/Color blend → Noise texture

The layer architecture directly follows Microsoft's design specifications, implementing the same background source, blur effects, exclusion blending, color tinting, and noise patterns that make Windows Acrylic so distinctive and visually appealing.

✨ 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 Acrylic
• ⚡ High Performance - Uses CSS backdrop-filter and mask
• 🧩 Unified API - Single function handles all layers

🚀 Quick Start

Installation

npm install progressive-acrylic

Basic Usage

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

<script src="./progressive-acrylic.js"></script>
<script>
  progressiveAcrylic(document.getElementById('myBlur'), {
    blur: {
      enabled: true,
      direction: 'bottom',
      height: '50%',
      maxBlur: 200
    },
    tint: {
      enabled: true,
      color: '#ffffff',
      opacity: 0.1
    }
    ...
  });
</script>

📋 API Reference

progressiveAcrylic(target, options)

The main function for creating layered acrylic effects.

Parameters

Parameter	Type	Default	Description
target	HTMLElement	-	Target DOM element for blur overlay
options	Object	{}	Configuration options

Options Object Structure

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

🎯 Layer Configuration

Blur Layer Options

Option	Type	Default	Range/Values	Description
enabled	Boolean	true	true/false	Enable/disable blur layer
direction	String	'bottom'	'top', 'bottom', 'left', 'right'	Blur fade direction
height	String	'60%'	'10%' - '100%'	Height of blur area
layers	Number	8	3 - 20	Number of blur layers (more = smoother)
maxBlur	Number	40	0 - 1000	Maximum blur amount in pixels
startOpacity	Number	0	0 - 1	Starting opacity of gradient
endOpacity	Number	1	0 - 1	Ending opacity of gradient
position	String	'bottom'	'top', 'bottom'	Vertical position of blur area
curve	Array	[0.25, 0.46, 0.45, 0.94]	Cubic-bezier values, 'linear', 'ease-in', 'ease-out', 'ease-in-out'	Distribution curve for layers

Luminosity Layer Options

Option	Type	Default	Range/Values	Description
enabled	Boolean	false	true/false	Enable/disable luminosity layer
brightness	Number	1.1	0 - 2	Brightness adjustment
contrast	Number	1.05	0 - 2	Contrast adjustment
saturate	Number	1.2	0 - 3	Saturation adjustment
opacity	Number	0.8	0 - 1	Layer opacity
blendMode	String	'normal'	CSS blend modes	Mix blend mode

Tint Layer Options

Option	Type	Default	Range/Values	Description
enabled	Boolean	false	true/false	Enable/disable tint layer
color	String	'#ffffff'	Hex color	Solid color (when no gradient)
gradient	Object	null	Gradient object	Linear gradient configuration
opacity	Number	0.1	0 - 1	Layer opacity
blendMode	String	'overlay'	CSS blend modes	Mix blend mode

Gradient Object Structure

gradient: {
  direction: 'to bottom',  // CSS gradient direction
  colors: [
    { color: '#ffffff', stop: 0, opacity: 0.3 },
    { color: '#000000', stop: 100, opacity: 0.7 }
  ]
}

Noise Layer Options

Option	Type	Default	Range/Values	Description
enabled	Boolean	false	true/false	Enable/disable noise layer
opacity	Number	0.3	0 - 1	Layer opacity
blendMode	String	'multiply'	CSS blend modes	Mix blend mode

📖 Usage Examples

iOS-Style Acrylic

progressiveAcrylic(element, {
  blur: {
    enabled: true,
    direction: 'top',
    height: '40%',
    layers: 6,
    maxBlur: 130,
    startOpacity: 0,
    endOpacity: 1,
    position: 'top',
    curve: [0.62, 0.123, 0.92, 0.002]
  },
  luminosity: {
      enabled: true,
      brightness: 1,
      contrast: 1.2,
      saturate: 1.3,
      opacity: 1,
      blendMode: 'normal'
  },
  tint: {
      enabled: true,
      color: '#000000',
      opacity: 0.75,
      blendMode: 'normal'
  },
  noise: {
      enabled: false,
      opacity: 0.3,
      blendMode: 'multiply'
  }
});

Windows Acrylic

progressiveAcrylic(element, {
  blur: {
    enabled: true,
    direction: 'bottom',
    height: '100%',
    layers: 4,
    maxBlur: 200,
    startOpacity: 1,
    endOpacity: 1,
    position: 'bottom',
    curve: 'linear'
  },
  luminosity: {
      enabled: true,
      brightness: 1.1,
      contrast: 1,
      saturate: 1.2,
      opacity: 1,
      blendMode: 'normal'
  },
  tint: {
      enabled: false,
      color: '#ffffff',
      opacity: 0.15,
      blendMode: 'normal'
  },
  noise: {
      enabled: true,
      opacity: 1,
      blendMode: 'overlay'
  }
});

Glass Morphism Effect

progressiveAcrylic(element, {
  blur: {
    enabled: true,
    direction: 'bottom',
    height: '33%',
    layers: 3,
    maxBlur: 300,
    curve: [0.09, 0.93, 0.7, 0.01]
  },
  luminosity: {
    enabled: false
  },
  tint: {
    enabled: false
  },
  noise: {
    enabled: false
  }
});

Gradient Tint Effect

progressiveAcrylic(element, {
  blur: {
    enabled: true,
    maxBlur: 150,
    height: '60%'
  },
  tint: {
    enabled: true,
    gradient: {
      direction: 'to bottom',
      colors: [
        { color: '#ffffff', stop: 0, opacity: 0.3 },
        { color: '#000000', stop: 50, opacity: 0.1 },
        { color: '#0066cc', stop: 100, opacity: 0.5 }
      ]
    },
    opacity: 1,
    blendMode: 'overlay'
  }
});

🎨 Curve Options

Control how blur layers are distributed using cubic-bezier curves.

Preset Curves

// iOS-style smooth animation
curve: [0.25, 0.46, 0.45, 0.94]

// Bounce effect
curve: [0.68, -0.55, 0.265, 1.55]

// Extreme ease-out
curve: [0.16, 1, 0.3, 1]

// Sharp start, smooth end
curve: [0.7, 0, 0.84, 0]

🔧 Advanced Usage

Update Method

const acrylic = progressiveAcrylic(element, initialOptions);

// Update settings
acrylic.update({
  blur: { maxBlur: 300 },
  tint: { opacity: 0.2 }
});

// Destroy effect
acrylic.destroy();

Multiple Blur Areas

// Header blur
progressiveAcrylic(headerElement, {
  blur: { direction: 'top', position: 'top', height: '30%' },
  tint: { enabled: true, color: '#000000', opacity: 0.3 }
});

// Footer blur
progressiveAcrylic(footerElement, {
  blur: { direction: 'bottom', position: 'bottom', height: '40%' },
  luminosity: { enabled: true, brightness: 1.2 }
});

🎨 CSS Setup

Ensure your HTML structure supports backdrop-filter:

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

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

🌐 Browser Support

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

Backdrop-filter is required for blur effects to work.

📄 License

MIT License - see LICENSE file for details.

🤝 Contributing

Contributions welcome!

🙏 Credits

• Thanks to grilly86 for noise textures generated using Base64 Noise Generator

• Thanks to chrisbanes/haze for cubic bezier system inspiration

• Thanks to joogps/Glur for general inspiration