Frosted Glass Navbar

Name: FriendRewind
Author: FriendRewind

FriendRewind

18 hours ago — by FriendRewind Team — Navigation — used 1 times

Turns the top navigation into a frosted glass strip that blurs whatever is behind it. Looks best over an image or gradient background.

CSS Code

Copy this and paste it at the bottom of the Advanced CSS tab in your layout editor, then save.

/* Frosted Glass Navbar */
.myspace-header .top, nav .top {
    background: rgba(255, 255, 255, 0.18) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}
.myspace-header .links, nav .links {
    background: rgba(0, 0, 0, 0.25) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}
.myspace-header .links a, nav .links a {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.6) !important;
}

How to use: copy the code above → open your layout editor → paste it at the bottom of the Advanced CSS tab → save → refresh your profile. Elements stack — you can combine as many as you like. New to CSS? Read the Custom Code Tutorial.

« Back to all Profile Elements