Glassy Minimal Dark

Tags: minimal, dark, gpl, glass

Description:

A minimalist dark mode UI with a glassy look. If you use and/or modify this design you must credit me.

    This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with this program.  If not, see <https://www.gnu.org/licenses/>.

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by Jason (https://layouts.spacehey.com/layout?id=10529) -->

<style>

:root {
  --bg-color: #111111;
  --fg-color: white;
  --bg-color-glass: rgba(60, 60, 60, .15);
}
body {
  background: #111111;

}

.container {
  margin: 0px;
  width: 100%;
  background: #111111;
}

main {
  color: var(--fg-color);
  background: radial-gradient(
      circle at 15% 50%,
      #2c2250,
      rgba(255, 255, 255, 0) 25%
    ),
    radial-gradient(circle at 85% 30%, #07303b, rgba(255, 255, 255, 0) 25%);
}


.profile-info {
  border: none !important;
  backdrop-filter: blur(5px);
  background: var(--bg-color-glass) !important;
  box-shadow: 2px 3px 10px 2px black;
}

.heading {
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 15px 5px !important;
  margin-bottom: 10px !important;
  backdrop-filter: blur(5px);
  background: var(--bg-color-glass) !important;
  box-shadow: 2px 3px 10px 2px black;
}

.blog-preview {
  padding: 5px 7px 5px;
  border: none !important;
  backdrop-filter: blur(5px) !important;
  background: var(--bg-color-glass) !important;
  box-shadow: 2px 3px 10px 2px black;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

nav, footer {
  border: none !important;
  background: var(--bg-color-glass) !important;
  box-shadow: 2px 3px 10px 2px black;
  margin: 20px;
  padding: 10px;
  border-radius: 50px;
  color: white;
}

div.top, ul.links {
  background: transparent !important;
}

.table-section, .url-info, .contact, .blurbs, .friends {
  border: none !important;
  backdrop-filter: blur(5px) !important;
  background: var(--bg-color-glass) !important;
  box-shadow: 2px 3px 10px 2px black;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.details-table td, th {
  background: transparent !important;
  border: 2px solid var(--bg-color-glass) !important;
}

.details-table {
  border-collapse: collapse !important;
  margin-left: 0px;
  margin-right: 5px;
}

.profile-pic img {
  border-radius: 50%;
}
</style>

Copy and paste this code into the "About me" section of your Profile to use it.

Caution: This Layout was not inspected by SpaceHey — use it at your own risk.

Comments

Displaying 2 of 2 comments ( View all | Add Comment )

César

1693762970

usin' thi' shi' u'

Report Comment

XaiBlaze

1637119551

Report Comment