Are you looking for some glass UX snippet?
If the answer is yes, then you’re at the right place.
Recently, I have been playing with CSS to create a perfect glass effect and mentioned below is the result.
Glass Card
This creates a glass (i.e, semi-transparent) background style that you can apply to cards or, content blocks to make your project look awesome.
.glass-card {
background: rgba(255, 255, 255, 0);
backdrop-filter: blur(23px);
-webkit-backdrop-filter: blur(23px);
border-radius: 14px;
}
Pure Glass Effect
With some tiny modifications (like adding some colourful borders), you can make it look even cooler. This is actually the code am using in my personal website for a “Neon Glass UX” design.
.pure-glass {
background: rgba(255, 255, 255, 0);
backdrop-filter: blur(23px);
-webkit-backdrop-filter: blur(23px);
border-radius: 14px;
border: 1px solid $color-3;
}
Below are some UX screenshots from my website. It’s yet to be published but I think I have got the vibe right.
PS: Notice how the border colour from the below card element gets reflected in the modal glass UX. Certainly makes things look a lot cooler.
I am really excited about revamping my portfolio website and I hope you like the UX vibe. Wish you success in your experimentation with the glass UX design philosophy.
Happy coding!
