Blur the topbar’s background

Question

This stylesheet will make the background of the topbar show a blurred version of the contents below it. Note that I was unable to make the search box transparent (the icon was invisible), and I couldn’t make the arrow next to the “StackExchange” logo high-contrast, either.

/**
 * Copyright © 2016 Jed Fox
 *
 * (The MIT License)
 *
 * Permission is hereby granted, free of charge, to any person obtaining
 * a copy of this software and associated documentation files (the
 * "Software"), to deal in the Software without restriction, including
 * without limitation the rights to use, copy, modify, merge, publish,
 * distribute, sublicense, and/or sell copies of the Software, and to
 * permit persons to whom the Software is furnished to do so, subject
 * to the following conditions:
 *
 * - The above copyright notice and this permission notice shall be
 *   included in all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
 * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
 * MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
 * IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
 * CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
 * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
 * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */
.topbar {
    background-color: rgba(12, 13, 14, 0.4) !important;
    -webkit-backdrop-filter: blur(10px);
}

.triangle, .topbar-icon:not(.icon-site-switcher) {
    -webkit-filter: brightness(200%);
            filter: brightness(200%);
}
.topbar-icon.yes-hover:hover, .topbar-links a:hover, .topbar-icon.topbar-icon-on {
    background-color: rgba(59, 64, 69, 0.4) !important; 
}

This script only works in browsers that support the -webkit-backdrop-filter property.

Here is a full list of what is supported:

• Safari 9.1+
• Safari Mobile 9.2+
• Opera 34+ (with flag)
• Opera 37+ for Android (with flag)
• Chrome 47+ (with flag)
• Chrome 51+ for Android (with flag)

^{source: caniuse.com}

Screenshot:

^{source: Ask Different}

Answer 1

I've ported this to JavaScript, Tampermonkey, and Greasemonkey.

You can install the Tampermonkey script here: Install View Source