BlurJS Test Page
This page tests the various features of BlurJS using examples from the README.
Basic Styling
1. Default Blur
2. Custom Width, Height, Color, and Amount
3. Custom Border Radius & Positioning
Advanced Styling
1. Combining Multiple Properties & Positioning
2. Grainy Texture Effect
3. User Select and Pointer Events
Try selecting this text (should NOT be possible). Click events should pass through the blur.
This blur should allow clicks (pointer-events: all) and text selection.
Selectable Text on Blur
Animations
1. Simple Scale Animation
2. Combined Opacity and Translation Animation
3. Animating Blur Amount
Interactions
1. Hover Interaction (Scale Effect)
2. Click Interaction (Toggle Opacity)
3. Scroll Interaction (Translate Effect)
Scroll down slowly to see the effect on the element far below.
4. Custom CSS properties
This blur element has a custom gradient background and a border applied using blur-custom.
Scroll further...
More space after.