---
title: "Blur atom | GoodBarber's Design System"
description: "The blur atom applies a background blur to structural surfaces such as the TabBar, creating a sense of depth and focus on iOS, PWA and Android."
canonical_url: "https://www.goodbarber.com/uxdesign/atom-blur/"
lang: pt
---

# Blur atom | GoodBarber's Design System

[Design System](https://pt.goodbarber.com/uxdesign/)

![](https://portal.ww-cdn.com/portal_static/svg/fapro/solid/grid.b60a521defb3.svg)

[https://pt.goodbarber.com/uxdesign/](https://pt.goodbarber.com/uxdesign/)

![](https://portal.ww-cdn.com/portal_static/svg/fapro/regular/chevron-up.4b0a6b4e88c8.svg)

![](https://portal.ww-cdn.com/portal_static/svg/fapro/regular/chevron-down.e16b9408a703.svg)

![](https://portal.ww-cdn.com/portal_static/svg/fapro/solid/grid.b60a521defb3.svg)

[Overview](https://pt.goodbarber.com/uxdesign/)

- [Foundations](/uxdesign/foundations/)
* Layout
+ [Grid](/uxdesign/grid/)
+ [Spacing](/uxdesign/spacing/)
+ [Breakpoints](/uxdesign/breakpoints/)
+ [Layers](/uxdesign/layers/)
* Graphic elements
+ [Color](/uxdesign/color/)
+ [Typography](/uxdesign/typography/)
+ [Images Aspect Ratios](/uxdesign/images-aspect-ratios/)
+ [Icons](/uxdesign/icons/)
- [Atomic Components](/uxdesign/atomic-components/)
* [Color atom](/uxdesign/atom-color/)
* [Font atom](/uxdesign/atom-font/)
* [Image atom](/uxdesign/atom-image/)
* [Gradient atom](/uxdesign/atom-gradient/)
* [Shape atom](/uxdesign/atom-shape/)
* [Shadow atom](/uxdesign/atom-shadow/)
* [Size atom](/uxdesign/atom-size/)
* [Border atom](/uxdesign/atom-border/)
* [Blur atom](/uxdesign/atom-blur/)
* [Overlay atom](/uxdesign/atom-overlay/)
* [Immersive feedback atom](/uxdesign/atom-immersive-feedback/)
- [UI Components](/uxdesign/ui-components/)
* [Background](/uxdesign/background/)
* [Text Field](/uxdesign/textfield/)
* [Dropdown](/uxdesign/dropdown/)
* [Date & Time Picker](/uxdesign/date-time-picker/)
* [Checkboxes & Radio Button](/uxdesign/checkboxes-radio-button/)
* [Button](/uxdesign/button/)
* [Thumbnail](/uxdesign/thumbnail/)
* [Form](/uxdesign/form/)

# Blur atom

Atomic Components

The blur atom blurs the background of structural surfaces, creating depth and hierarchy across the interface.

[https://portal.ww-cdn.com/portal_static/images/designsystem/videos/atom_blur.b34852843c57.mp4](https://portal.ww-cdn.com/portal_static/images/designsystem/videos/atom_blur.b34852843c57.mp4)

![Blur effect on image](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Atoms-Blur.621e730d17d3.gif)

*Blur effect on image*

## Introduction

Background Blur applies to structural UI surfaces. It is currently available on the TabBar and the More menu, with more surfaces to come.

On iOS, it uses **system materials** whenever available, so the surface adapts to light and dark mode, increased contrast, the content underneath, scroll edge transitions and the surrounding context.

On PWA and Android, it reproduces the same **perceptual intensity** through platform-specific blur and tint approximations.

**Available on iOS, PWA and Android.**

Blur intensity follows iOS material levels; on PWA and Android, those materials are adapted or simulated for a comparable result. Two modes are available: **Uniform** (constant density) and **Progressive** (density increases from bottom to top). A **Visual Style** option switches between **Light** and **Dark**, matching system material behavior.

### JSON

```
{

 "type": "uniform | progressive",

 "material": "ultraThinMaterial | thinMaterial | regularMaterial | thickMaterial | chromeMaterial",

 "style": "light | dark",

 "endPoint": { // Used only for progressive

  "x": FLOAT, // Between 0 & 1,

  "y": FLOAT // Between 0 & 1

 },

 "startPoint": { // Used only for progressive

  "x": FLOAT, // Between 0 & 1,

  "y": FLOAT // Between 0 & 1

 }

}
```

### Properties

- **type**: the blur mode. `uniform` keeps a constant density; `progressive` increases it from bottom to top.
- **material**: sets the blur intensity and tint, based on iOS system materials, from lightest to densest: `ultraThinMaterial`, `thinMaterial`, `regularMaterial`, `thickMaterial`, `chromeMaterial`. On PWA and Android, the closest approximation is applied.
- **style**: the visual style, matching system material behavior: `light` or `dark`.
- **startPoint** (progressive only): where the blur starts, as `x` and `y` between 0 and 1. A bottom-to-top blur starts at `y: 0`.
- **endPoint** (progressive only): where the blur reaches full intensity, as `x` and `y` between 0 and 1. A bottom-to-top blur ends at `y: 1`.