mirror of
https://github.com/tabler/tabler.git
synced 2026-10-12 21:27:06 +04:00
40 lines
1.7 KiB
Plaintext
40 lines
1.7 KiB
Plaintext
---
|
|
title: Background blur
|
|
summary: The bg-blur utility blurs whatever sits behind an element, so overlays, sticky bars and floating cards stay readable on busy content.
|
|
description: Use the bg-blur utility to add a backdrop blur behind translucent overlays, sticky bars and floating cards.
|
|
related: [/ui/utilities/background-patterns, /ui/components/card]
|
|
added-in: 1.5.0
|
|
---
|
|
import Example from '@components/Example.astro';
|
|
|
|
## Overview
|
|
|
|
The `bg-blur` class sets `backdrop-filter: blur(4px)` on an element. The blur applies to the content behind the element, not to the element itself, so pair it with a translucent background such as `bg-white-lt` or an `rgba()` color. On an opaque background the blur has nothing to show through.
|
|
|
|
## Usage
|
|
|
|
Place the blurred element over an image or a pattern. The text stays sharp while the background softens.
|
|
|
|
<Example>
|
|
<div class="bg-pattern-dots bg-primary-lt rounded p-4">
|
|
<div class="card bg-blur" style="background-color: rgba(255, 255, 255, 0.6)">
|
|
<div class="card-body">
|
|
<h3 class="card-title">Floating card</h3>
|
|
<p class="mb-0">The dots behind this card are blurred by <code>bg-blur</code> .</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Example>
|
|
|
|
A sticky navbar or a footer bar over scrolling content is the same pattern: keep the bar translucent and add `bg-blur`.
|
|
|
|
```html
|
|
<header class="navbar sticky-top bg-blur" style="background-color: rgba(255, 255, 255, 0.8)">
|
|
...
|
|
</header>
|
|
```
|
|
|
|
## Accessibility
|
|
|
|
The blur changes only the backdrop. Check the text against the resulting background: a translucent surface over a dark photo can drop below the 4.5:1 contrast ratio even though the same surface passes on a light one. Raise the alpha of the background color when it does.
|