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!

[teamcons]

When experimenting, i found that indeed, a busy background with details kind of destroyed the dock readability - The icons are mixed with whatever is behind

Ive found the border helps a lot, like above, detach the dock and mark it as a distinct UI element
So i want to agree, while emphasizing the role of the border

however, while it helped making the dock visible, it did not help with making the icons very distinct

blurring behind the dock, not only makes it not be bland like a simple solid color, and also helps the icons detach by having them the details elements, while anything behind is washed up
I feel it is a good approach.

Some alternatives that were done:

• Flathub tried to put shadows behind icons, leading to double-shadows for the apps that already had shadows, and making some devs upset because they did not want any either. It caused a bit of drama.
  Ive tried. It works well for some icons, not for others. That should be left to the icon designer tbh imho

• Some other docks, like cairo-dock, did animate icons to make them readable as different elements. But that is more CPU intensive.
  I tried a zoom effect: it feels like a cheap macOS copycat, and the icons were pixelly to the max because they were upscaled in the process
  I tried a "icon goes up" or a "lil shake animation" when hovered. It is super cute. But it only helps readability when you hover the icons. When you look at the dock at a glance it does not help readability

Edit: What do you think of the dock having no background when nothing touches, like wingpanel, and reactively blur it if touching anything? That could be 10/10 for consistency.