Re: [csswg-drafts] Motion Blur Effects (#11134)

### Narrowing to an MVP: *progressive blur*

I can see the value in the broader set of blur effects discussed here (directional/motion/radial/etc). In the interest of getting something attainable and broadly useful into the platform, I’d like to propose an MVP focused on **progressive blur** first — because it’s a very common UI primitive (e.g. scrims, toolbars, “fade to blur” overlays), and it can likely be specified as a minimal extension of existing syntax.

#### Proposed API (MVP): extend `blur()` to allow a directional ramp

Allow `blur()` to take a *from/to* pair plus an optional direction, analogous to `linear-gradient()` direction syntax:

```css
/* existing */
filter: blur(<length>);

/* proposed (progressive blur) */
filter: blur(<from-length> <to-length> [[to <side-or-corner>] | <angle>]);

/* also for backdrop blur */
backdrop-filter: blur(<from-length> <to-length> [[to <side-or-corner>] | <angle>]);
```

##### Example:
```css
.scrim {
 backdrop-filter: blur(0px 24px to bottom);
}
```

#### Semantics:

- Blur radius varies linearly from `<from-length>` to `<to-length>` along the given direction, following the same coordinate space / region rules that existing `blur()` / `backdrop-filter: blur()` already use (minimal change beyond new arguments).
- If direction is omitted, default is to bottom.
- If only one length is provided, behaviour remains the current uniform blur.

#### Non-goals for MVP:

- No radial/zoom blur, no motion/velocity-coupled blur, no custom start-point offsets, no nonlinear ramps.
- Goal is just: “blur gradient in a direction” for common UI scrim/header/footer patterns.

-- 
GitHub Notification of comment by damian-dp
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/11134#issuecomment-3703475519 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Thursday, 1 January 2026 09:39:53 UTC