DEV Community

Cover image for Recreating iOS-style Progressive Blur on the Web
Junhao Xu
Junhao Xu

Posted on • Edited on

Recreating iOS-style Progressive Blur on the Web

#css #frontend #ui #webdev

One day while using my phone, I noticed how beautiful the blur effect in iOS was:

iOS Screenshot

This effect is very common in iOS and looks transparent and layered.

It's not a single-radius blur, but rather a layered and progressive blur.

So I had a question:

Can a similar progressive blur effect to iOS be achieved on the web?

Existing Blur Effects on the Web Platform

On the web platform, we commonly use only these two methods to achieve blur effects:

filter: blur(...)
backdrop-filter: blur(...)
Enter fullscreen mode Exit fullscreen mode

However, both of them can only achieve a single-radius blur, meaning they cannot achieve the layered and progressive blur like in iOS.

Implementation on the Web Platform

Since CSS doesn't support a "progressive blur" effect, I had to implement it myself:

  • The blur is broken down into multiple layers.
  • Each layer is responsible for a specific intensity range.
  • A progressive mask controls the display ratio.
  • The outermost layer acts as a container.

The result is very close to the progressive blur effect on iOS.

The specific implementation is not complex, but there will be some performance overhead when the number of blur layers is large.

Packaged as a Lit Component

After implementing the effect, I quickly encountered a problem:

When controlling the number of blur layers and other parameters, manual modification is required, which is very time-consuming and laborious.

So I packaged it into a Lit component.

I chose to use Web Components (Lit) to encapsulate this blur effect for a simple reason:

After being packaged as a WC component, it can be used directly in React, Vue, or native HTML, without any additional adaptation.

Just one line of code:

<ablur-layer ...>...</ablur-layer>
Enter fullscreen mode Exit fullscreen mode

can achieve a complex progressive blur effect.

To customize effects such as blur radius or blur progress, simply adjust the parameters of this component. The resulting effect is shown below:

https://codepen.io/xu-junhao/pen/vEKrjYv

This project is open-source on GitHub: https://github.com/xujunhao940/ablur/

You can install it using npm: npm install ablur

Or insert the following into your HTML to use it directly:

<script type="module" src="https://unpkg.com/ablur/dist/index.js"></script>
Enter fullscreen mode Exit fullscreen mode

If you are also pursuing a similar visual effect to iOS in your web project, hopefully this article will be of some value to you.

Top comments (0)