Motion Blur Effects

[yashrajbharti]

Why

Current CSS blur capabilities apply uniformly across entire elements, which limits the potential for directionally, progressively, and partially blurred effects directly in CSS. Achieving realistic motion effects, like motion blur, or specific directional blurs, which add depth and context, is only feasible through design tools such as Figma and Photoshop. As a UX Engineer with experience in both design and development, I see a need to expand CSS blur capabilities to enhance design fidelity on the web.

Motivation

In a recent conversation with Google DevRel @argyleink, he emphasized the value of adding a directional blur feature in CSS. This would allow for effects currently only available in SVG to be more accessible within CSS, promoting consistency across web platforms and design tools.

Feature Breakdown

1. Motion Blur:

• Description: Simulates real-world motion by blurring, similar to motion graphic tools like Photoshop's motion blur.
• Use Cases: Adds realism in animations, especially for fast-moving elements like vehicles or UI components.
• Proposed Syntax:

.blur-layer {
  motion-blur: 10px, -30deg; /* Shorthand for motion blur */
  /* Long-form properties */
  motion-blur-distance: 10px;
  motion-blur-angle: -30deg;
}

• Values:
  motion-blur: none | auto | inherit | initial; where auto applies a default subtle blur, none disables the effect, and inherit follows the parent element.

• Example from Photoshop:

2. Horizontal and Vertical Blur:

• Description: Applies blur along a single axis, which is useful for directional emphasis or to simulate movement.
• Use Cases: Perfect for images that depict motion in a single direction, like trains or passing scenery.
• Proposed Syntax:

.horizontal-blur {
  motion-blur: linear(20px, 0deg); /* Horizontal blur */
}
.vertical-blur {
  motion-blur: linear(20px, 90deg); /* Vertical blur */
}

This syntax not only limits blurring in horizontal or vertical direction, but any direction and has a similar syntax to linear-gradient(). This is different from the motion-blur: <distance> <angle> in a few ways.

The distinction between motion-blur: 10px, -30deg; and motion-blur: linear(10px, -30deg); is crucial for understanding how each type of blur affects visual elements. The first syntax, motion-blur: 10px, -30deg;, creates a uniform blur effect that smudges an element over a distance of 10 pixels, resulting in a softened appearance that conveys a sense of motion without a specific directional focus. In contrast, the second syntax, motion-blur: linear(10px, -30deg);, applies a directional blur that not only blurs the element but also simulates a speed-based movement effect by squeezing the blur along the specified angle of -30 degrees. This distinction allows designers to choose between a generalized motion effect and a more dynamic, directional blur that enhances the realism of animations, providing greater control over how motion is visually represented in web design.

• Horizontal blur example:

• Vertical blur example:

3. Radial/Zoom Blur

• Description: Applies a radial blur that starts from a focal point and blurs outward, mimicking zoom motion.
• Use Cases: Useful for scenarios where focus is centered, such as for elements meant to draw user attention to the middle.
• Proposed Syntax:

.radial-blur {
  motion-blur: radial(10px at center); /* Radial blur with adjustable intensity */
}

• Examples:
  
  

4. Progressive Blur

• Description: Blurs progressively in a specified direction, creating a gradient-like blur effect that can simulate depth or movement in a single direction. This is possible using a progressive blur plugin in Figma but lacks as a feature in CSS.
• Use Cases: Useful for elements that need a gradual visual hierarchy, like background transitions.
• Proposed Syntax:

.progressive-blur {
  motion-blur: progressive(10px, to bottom); /* Blurs progressively from top to bottom */
}

Syntax Summary for Motion Blur Properties

1. Motion Blur:

motion-blur: 10px, -30deg; /* Shorthand motion blur */
motion-blur-distance: 10px; /* Long-form for distance */
motion-blur-angle: -30deg; /* Long-form for angle */

2. Horizontal and Vertical Blur:

.horizontal-blur {
  motion-blur: linear(20px, 0deg);
}
.vertical-blur {
  motion-blur: linear(20px, 90deg);
}

3. Radial Blur:

motion-blur: radial(10px at center);

4. Progressive Blur:

motion-blur: progressive(10px, to bottom);

This syntax aims to provide greater control over how motion blur is visually represented in web design. However, it may need changes as I am still figuring out how to incorporate all aspects of the amount of blurriness to apply as a value, blur distance, blur angle, the amount of squish in directional blur, and the starting point in progressive blur.

[argyleink]

I really like this proposal!

2015 is when I learned SVG could do x or y blur effects from SVG filters(demo). I think this proposal should move as much into CSS as possible and detach itself from the SVG dependency.

I want that progressive motion blur right now 🙂 I've tried emulating it before with today's blur filters and gradients/masks, but never matched the effect. Great examples, and a solid syntax proposal imo.

It's also a great complimentary proposal to #3837. This "motion blur effects" proposal offers specific functions, which give great control but would need manual transitions/keyframes in order to animate; while proposal #3837 is automatic and adapts blur amounts to the distance | difference pixels incur during animation.

[smfr]

This should be a filter function: filter: motion-blur(45deg, 10px 20px) or something.

[Monknow]

I really like this idea, but adding it as part of the syntax of the blur() function makes more sense. Maybe something like

• filter: blur(20px, 0deg, linear);
• filter: blur(10px, at center, radial);
• filter: blur(10px, to bottom, progressive);

The keywords "at center" and "to bottom" would have a numeric equivalent like linear-gradient() and radial-gradient() do?