Janky Aero

Author: 𝓢𝓸𝓵 𝓢𝔂𝓪𝓷𝓲𝓭𝓮 💎☮️
Category: Classic
Created: July 4, 2026
comment buttons have animations when u hover on them. this is a layout inspired by those goofy, overly-gradient using websites from the late 2000s-early 2010s. I guess it could be called frutiger aero, but it's not as polished. tags: 2000s 2010s glossy shiny blue green gray old web.
Comments (1)

SafeInSanity 08/02/2026 3:46 PM
Looks cool!
You must log in to comment.
CSS Code

<style>
body {
  padding-bottom: 56px !important;
  margin-bottom: 56px !important;
  background-image: url('https://i.pinimg.com/736x/5a/7f/1e/5a7f1eff255d5e1d91e542d67c8be256.jpg');
background-repeat: no-repeat;
background-size: cover;
background-attachment:fixed;
}
a{
color: blue;
}
a:hover{
color: orange;
}
.cb-actions button:hover{
 height: 16px;
border-radius: 5px;
background: linear-gradient(to bottom,
    #00ab25 0%,
    #00c92b 55%,
    #00ff37 80%,
    #ffffff 100%

);
border: 1px solid black;
}
  .cb-actions button, .nav-search-btn, .cb-actions a button{
 height: 16px;
border-radius: 5px;
background: linear-gradient(to bottom,
    #ffffff 0%,
    #00ff37 55%,
    #00c92b 80%,
    #00ab25 100%

);
border: 1px solid black;
 
}
 .myspace-header {
  background-color: transparent !important;
}
.top-nav.navbar::before {
background: linear-gradient(to bottom,
    rgb(255, 255, 255) 0%,
    rgba(255, 255, 255, 0.5) 100%
);
border-radius: 20px;
position: absolute;
content: "";
height: 16px;
width: 90%;
top: 0px;
opacity: 0.3;
}
 .top-nav.navbar{
    background: linear-gradient(to bottom,
   
 #add1ff 0%,
    #0064e0 55%,
    #0055bf 80%,
    #004ba8 100%
) !important;
  }
 body.skin-classic .main-nav-wrapper{
    background: linear-gradient(to bottom,
     #8c8c8c 0%,
    #bfbfbf 55%,
    #8a8a8a 80%,
    #4f4f4f 100%
);
border: 1px solid black;
height: 30px;
 
  }
.profile-playlist-widget {
  border: 1px solid rgba(255,255,255,0.15);
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  color: #000;
  box-shadow: 0 4px 18px rgba(0,0,0,0.4);
  max-width: 280px;
  font-size: 13px;
  border-radius: 0px;
  padding: 12px;
  margin: 15px 0;
  position: relative;
  z-index: 1;
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
  background: linear-gradient(to bottom, #757575 0%, #c3c3c3 55%, #8a8a8a 80%, #4f4f4f 100% );
  border: 1px solid black;
  height: 120px;
}
.profile-playlist-widget::before {
background: linear-gradient(to bottom,
    rgb(255, 255, 255) 0%,
    rgba(255, 255, 255, 0.5) 100%
);
border-radius: 20px;
position: absolute;
content: "";
height: 16px;
width: 90%;
top: 0px;
opacity: 0.3;
}
.profile-playlist-widget h3 {
  margin: 0;
  font-size: 15px;
  color: #000;
  flex: 1;
  text-shadow: 2px 2px 2px gray;
}
.profile .blurbs .heading, .profile .friends .heading {
  color: #FFF;
  padding: 2px 7px;
  background: linear-gradient(to bottom, #add1ff 0%, #0064e0 55%, #0055bf 80%, #004ba8 100% );
  border-radius: 3px;
}
body.skin-classic .main-nav.navigation li a {
  text-decoration: none;
  color: white;
  text-shadow: 2px 2px 0px #4E4E4E7D;
  font-size: max(0.98em, 12px);
  padding: 0px 20px;
  background: none;
  border: none;
  border-radius: 0;
  font-weight: bold;
}
main{
backdrop-filter: blur(5px);
border: 1px solid ghostwhite;
}
body:not(.layout-bodybg) main {
  background: #ffffff42;
  color: #000;
  padding: 6px 0;
  font-size: 80%;
}
.profile-playlist-widget li {
border-radius: 0px;
border: 1px solid rgb(0, 0, 0);
background: linear-gradient(to bottom, #757575 0%, #c3c3c3 55%, #8a8a8a 80%, #4f4f4f 100% );
color: black;
}
.profile-playlist-widget ul ::before {
  background: linear-gradient(to bottom, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 100% );
  border-radius: 20px;
  position: absolute;
  content: "";
  height: 5px;
  width: 60%;
  top: 0px;
  opacity: 0.3;
}
.home-actions, .profile .contact, .profile .table-section, .profile .url-info, .setting-section {
  width: 100%;
  border: 2px solid #60a5fa;
  border: 2px solid var(--lighter-blue);
  margin: 10px 0;
  background: linear-gradient(to bottom, #000 0%, #1ae114 55%, #0be122 80%, #bfffbc 100% );
  border: 1px solid black;
  border-radius: 10px;
}
.home-actions, .profile .contact, .profile .table-section, .profile .url-info, .setting-section a {
  color: white;
}
.home-actions .heading, .profile .contact .heading, .profile .table-section .heading, .setting-section .heading {
  color: #fff;
  padding: 2px 7px;
  background: linear-gradient(to bottom, #add1ff 0%, #0064e0 55%, #0055bf 80%, #004ba8 100% );
  border-radius: 7px;
  border: 1px solid darkblue;
}
.profile .blurbs .heading, .profile .friends .heading {
  color: #FFF;
  padding: 2px 7px;
  background: linear-gradient(to bottom, #add1ff 0%, #0064e0 55%, #0055bf 80%, #004ba8 100% );
  border-radius: 3px;
  border: 2px solid black;
}
.details-table td:first-child {
  background: #bfdbfe;
  color: #1d4ed8;
  color: var(--logo-blue);
  font-weight: 700;
  width: 33%;
  border-radius: 10px;
  background: linear-gradient(to bottom, #fff 0%, #9c9c9c 55%, #808080 80%, #414141 100% );
  border: 1px solid black;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: black;
  border-bottom: 2px solid black;
  height: 25px;
  position: relative;
}
.details-table td {
  background: #dbeafe;
  background: #00000024;
  vertical-align: top;
  height: 27px;
  border-radius: 3px;
  color: white;
  border: 1px solid #00000024;
}
.comments-table td, .music-table td {
  background: #fcdbb8;
    background-color: rgb(252, 219, 184);
  vertical-align: top;
  border-radius: 5px;
  background-color: rgba(240,248,255,.5);
  backdrop-filter: blur(2px);
  border: 1px solid ghostwhite;
}
.comments-table td:first-child, .music-table td:first-child {
  text-align: center;
  font-weight: 700;
  width: 30%;
  border-radius: 5px;
  border-radius: 5px;
  background-color: rgba(180, 198, 214, 0.5);
  backdrop-filter: blur(2px);
  border: 1px solid ghostwhite;
}
.details-table td:first-child {
  color: rgb(0, 0, 0);
}
</style>