DEV Community

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

Posted on

Recreating iOS-style Gradient Blur on the Web

#css #webdev #frontend #ui

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 gradient blur.

So I had a question:

Can a similar gradient 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 gradient blur like in iOS.

Implementation on the Web Platform

Since CSS doesn't support a "gradient 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 gradient mask controls the display ratio.
  • The outermost layer acts as a container.

The result is very close to the gradient 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 gradient blur effect.

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

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)