Skip to content

Instantly share code, notes, and snippets.

@pbnkp

pbnkp/apple-liquid-glass-with-css.markdown

Created August 10, 2025 19:15
Show Gist options
  • Save pbnkp/9898472c800e68b19b44e59832b1a008 to your computer and use it in GitHub Desktop.
Save pbnkp/9898472c800e68b19b44e59832b1a008 to your computer and use it in GitHub Desktop.
Download ZIP
Apple Liquid Glass with CSS
Raw
index.html
<div class="glassy-card">
<!-- Icons from https://www.iconfinder.com/ -->
<img src="https://cdn0.iconfinder.com/data/icons/apple-apps/100/Apple_Phone-512.png" alt="">
<img src="https://cdn0.iconfinder.com/data/icons/apple-apps/100/Apple_Safari-512.png" alt="">
<img src="https://cdn0.iconfinder.com/data/icons/apple-apps/100/Apple_Mail-512.png" alt="">
<img src="https://cdn0.iconfinder.com/data/icons/apple-apps/100/Apple_Photos-512.png" alt="">
</div>
<button id="change-bg">Change background</button>
Raw
script.js
// You don't need this part.
// It's only for this Codepen
const backgroundImgs = [
"https://images.unsplash.com/photo-1618005198919-d3d4b5a92ead?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
"https://images.unsplash.com/photo-1659952586072-b3cebadec6d2?q=80&w=1932&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
"https://images.unsplash.com/photo-1650646002393-9d057933cf89?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
"https://images.unsplash.com/photo-1576225410873-a28b2a79fd93?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
"https://images.unsplash.com/photo-1552083375-1447ce886485?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
];
let counter = 0;
document.getElementById("change-bg").addEventListener("click", () => {
counter = counter === backgroundImgs.length -1 ? 0 : counter + 1;
const randomImg = backgroundImgs[counter];
document.body.style.backgroundImage = `url(${randomImg})`;
});
Raw
style.css
/* ==== START CODE ==== */
.glassy-card {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.7em;
width: fit-content;
margin-inline: 0.5em;
padding: 0.5em;
border-radius: 1em;
border: 3px solid hsl(0, 0%, 100%, 0.3);
background: hsl(0, 0%, 100%, 0.2);
backdrop-filter: blur(2px);
box-shadow: inset 0 0 8px 1px hsl(0, 0%, 100%, 0.6);
}
/* ==== END CODE ==== */
/* General styling */
* { box-sizing: border-box }
body {
display: grid;
min-height: 100vh;
place-content: center;
gap: 1rem;
margin: 0;
font-family: system-ui, sans-serif;
background-color: #0b0c0d;
background-image: url("https://images.unsplash.com/photo-1552083375-1447ce886485?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
background-size: cover;
background-position: center;
font-size: clamp(1rem, 4vw, 2rem);
}
img {
display: block;
width: 4.5em;
aspect-ratio: 1 / 1;
}
#change-bg {
display: block;
width: fit-content;
margin-inline: auto;
padding: 0.5em 1em;
border-radius: 0.5em;
font: inherit;
font-size: 1.2rem;
color: white;
line-height: 1;
cursor: pointer;
border: 1px solid hsl(0, 0%, 100%, 0.6);
background: hsl(0, 0%, 100%, 0.2);
backdrop-filter: blur(2px);
box-shadow: inset 0 0 4px 1px hsl(0, 0%, 100%, 0.6);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment