Backdrop Filter Utilities
NuvoUI provides utility classes to apply visual effects to the area behind an element. These backdrop filter utilities are particularly useful for creating frosted glass effects, improving text readability over images, and adding depth to UI elements.
Overview
Backdrop filters apply visual effects to the area behind an element, rather than to the element itself. This creates effects like frosted glass or tinted overlays that still allow the background to show through.
The backdrop filter system includes:
- Blur effects of various intensities
- Brightness and contrast adjustments
- Color effects (grayscale, sepia, saturation)
- Hue rotation and color inversion
- Preset combinations for common UI patterns
Configuration
The backdrop filter system is built on configurable values that can be customized in your project:
Blur Values
Brightness Values
Contrast Values
Grayscale Values
Saturate Values
Sepia Values
Hue-Rotate Values
Invert Values
Filter Presets
Basic Backdrop Filters
Apply backdrop filter effects to elements with these utility classes:
| Class | CSS Property | Description |
|---|---|---|
.backdrop-none | backdrop-filter: none; | Removes any backdrop filter |
.backdrop-blur-sm | backdrop-filter: blur(4px); | Applies a small blur effect |
.backdrop-blur-md | backdrop-filter: blur(8px); | Applies a medium blur effect |
.backdrop-blur-lg | backdrop-filter: blur(12px); | Applies a large blur effect |
.backdrop-blur-xl | backdrop-filter: blur(24px); | Applies an extra large blur effect |
.backdrop-blur-2xl | backdrop-filter: blur(40px); | Applies a double extra large blur effect |
warning
Backdrop filters do not work if the element have opacity.
Brightness and Contrast
Brightness Utilities
Adjust the brightness of the backdrop with these utilities:
| Class | CSS Property | Description |
|---|---|---|
.backdrop-brightness-75 | backdrop-filter: brightness(75%); | Reduces brightness to 75% |
.backdrop-brightness-90 | backdrop-filter: brightness(90%); | Reduces brightness to 90% |
.backdrop-brightness-none | backdrop-filter: brightness(100%); | Default brightness |
.backdrop-brightness-110 | backdrop-filter: brightness(110%); | Increases brightness to 110% |
.backdrop-brightness-125 | backdrop-filter: brightness(125%); | Increases brightness to 125% |
.backdrop-brightness-150 | backdrop-filter: brightness(150%); | Increases brightness to 150% |
Contrast Utilities
| Class | CSS Property | Description |
|---|---|---|
.backdrop-contrast-75 | backdrop-filter: contrast(75%); | Reduces contrast to 75% |
.backdrop-contrast-90 | backdrop-filter: contrast(90%); | Reduces contrast to 90% |
.backdrop-contrast-none | backdrop-filter: contrast(100%); | Default contrast |
.backdrop-contrast-110 | backdrop-filter: contrast(110%); | Increases contrast to 110% |
.backdrop-contrast-125 | backdrop-filter: contrast(125%); | Increases contrast to 125% |
.backdrop-contrast-150 | backdrop-filter: contrast(150%); | Increases contrast to 150% |
Color Effects
Transform colors in the backdrop with these filter utilities:
| Effect | Classes | Description |
|---|---|---|
| Grayscale | .backdrop-grayscale-none, .backdrop-grayscale-25, .backdrop-grayscale-50, .backdrop-grayscale-75, .backdrop-grayscale-100 | Converts colors to grayscale at different percentages |
| Saturate | .backdrop-saturate-50, .backdrop-saturate-75, .backdrop-saturate-none, .backdrop-saturate-125, .backdrop-saturate-150, .backdrop-saturate-200 | Adjusts color saturation of the backdrop |
| Sepia | .backdrop-sepia-none, .backdrop-sepia-25, .backdrop-sepia-50, .backdrop-sepia-75, .backdrop-sepia-100 | Applies sepia tone at different intensities |
| Hue Rotate | .backdrop-hue-0, .backdrop-hue-90, .backdrop-hue-180, .backdrop-hue-270 | Rotates the hue of backdrop colors |
| Invert | .backdrop-invert-none, .backdrop-invert-25, .backdrop-invert-50, .backdrop-invert-75, .backdrop-invert-100 | Inverts the colors of the backdrop |
Preset Effects
NuvoUI includes ready-to-use backdrop filter combinations for common UI patterns:
| Class | Filter Combination | Use Case |
|---|---|---|
.backdrop-frosted | blur(8px) saturate(90%) brightness(120%) | Subtle frosted effect |
.backdrop-glass | blur(8px) saturate(120%) contrast(90%) | Modern glass effect |
.backdrop-dark-glass | blur(8px) saturate(180%) brightness(70%) contrast(90%) | Dark mode glass effect |
.backdrop-crystal | blur(8px) saturate(150%) | Cleaner, crystalline effect |
.backdrop-matte | blur(20px) saturate(90%) brightness(90%) | Matte finish effect |
Responsive Backdrop Filters
All backdrop filter utilities can be applied conditionally at different breakpoints using the @breakpoint suffix:
Common UI Patterns
Frosted Glass Header
Glass Effects
Modal with Backdrop Effects
Card with Backdrop Effects
SCSS Mixins
For more advanced use cases, you can use NuvoUI's backdrop filter mixins directly in your SCSS:
| Mixin | Description | Parameters |
|---|---|---|
@include backdrop-filter($value) | Generic backdrop filter with cross-browser support | $value: CSS filter value |
@include backdrop-blur($value) | Applies blur effect | $value: Blur amount ('sm', 'md', 'lg', 'xl', '2xl' or direct value) |
@include backdrop-brightness($value) | Adjusts backdrop brightness | $value: Brightness percentage ('75', '90', 'none', etc. or direct value) |
@include backdrop-contrast($value) | Adjusts backdrop contrast | $value: Contrast percentage ('75', '90', 'none', etc. or direct value) |
@include backdrop-grayscale($value) | Converts backdrop to grayscale | $value: Grayscale percentage ('25', '50', '75', etc. or direct value) |
@include backdrop-hue-rotate($value) | Rotates backdrop colors hue | $value: Rotation degree ('0', '90', '180', etc. or direct value) |
@include backdrop-invert($value) | Inverts backdrop colors | $value: Inversion percentage ('25', '50', '75', etc. or direct value) |
@include backdrop-saturate($value) | Adjusts backdrop saturation | $value: Saturation percentage ('50', '75', 'none', etc. or direct value) |
@include backdrop-sepia($value) | Applies sepia tone to backdrop | $value: Sepia percentage ('25', '50', '75', etc. or direct value) |
@include backdrop-frosted | Applies frosted glass preset | None |
@include backdrop-glass | Applies glass effect preset | None |
@include backdrop-dark-glass | Applies dark glass preset | None |
@include backdrop-crystal | Applies crystal clear preset | None |
@include backdrop-matte | Applies matte finish preset | None |
@include backdrop-none | Removes backdrop filters | None |
Example SCSS Usage
Progressive Enhancement
Customizing Backdrop Filters
You can customize the default values for backdrop filters in your project:
Best Practices
Performance Considerations
- Backdrop filters can be computationally expensive, especially on lower-end devices
- Limit the number of elements with backdrop filters on a single page
- Avoid applying backdrop filters to large elements when possible
- Consider using media queries to disable backdrop filters on devices that might struggle with them
Accessibility Tips
- Ensure sufficient contrast between text and the filtered backdrop
- Don't rely solely on backdrop filters to create visual boundaries
- Test with different screen brightness settings to ensure readability
- Provide alternative styling for browsers that don't support backdrop filters
Design Guidelines
- Use subtle filters for large areas (like headers and backgrounds)
- Reserve stronger effects for smaller UI components like cards and modals
- Combine backdrop filters with subtle background colors for better results
- Less is more - avoid combining too many filter effects