Blur Behind

[danirabbit]

Problem

Shell elements are transparent or semi-transparent so that they blend into the desktop itself, but this sometimes creates issues with contrast: elementary/dock#259

Proposal

A way to blur behind the Dock and Panel (when it has a background)

Prior Art (Optional)

Windows:

macOS:

Chrome OS:

[seifeldinio]

I propose adding a light background color with 10% opacity and a backdrop filter with a 9px blur effect. This enhances visibility and maintains the aesthetic blending of shell elements with the desktop.

dock {
    background: rgba(255, 255, 255, 0.1); /* 👈 Light background with 10% opacity */
    border-radius: 9px;
    box-shadow:
        inset 0 -1px 0 0 rgba(255, 255, 255, 0.1),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.15),
        inset 1px 0 0 0 rgba(255, 255, 255, 0.035),
        inset -1px 0 0 0 rgba(255, 255, 255, 0.035),
        0 0 0 1px rgba(0, 0, 0, 0.4),
        0 1px 3px rgba(0, 0, 0, 0.1),
        0 3px 9px rgba(0, 0, 0, 0.15);
    margin: 9px;
    margin-top: 0;
    backdrop-filter: blur(9px); /* 👈 Blur effect */
}

Mockups

To demonstrate the effectiveness of this solution, I have created four mockups showcasing the Dock over different backgrounds and text:

1. Text Background:

2. Light Background:

3. Mid Background:

4. Dark Background:

These mockups show that the Dock is now clearly visible and provides sufficient contrast against various backgrounds.

I'd love to hear your feedback or comments!