<!DOCTYPE html>
<html lang="en">
<!-- Card base glass with animated links and buttons -->
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Fixed Glass Cards with Parallax</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
min-height: 200vh;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: #000;
overflow-x: hidden;
position: relative;
}
.parallax-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 200%;
z-index: -2;
background-image: url('https://images.unsplash.com/photo-1539635278303-d4002c07eae3?crop=entropy&cs=srgb&fm=jpg&q=85');
background-size: cover;
background-position: center top;
transform: translateY(0);
transition: transform 0.1s linear;
}
.fixed-cards {
position: sticky;
top: 10%;
z-index: 2;
display: flex;
justify-content: center;
align-items: flex-start;
padding: 2rem 1rem;
}
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
gap: 1.5rem;
max-width: 1200px;
width: 100%;
}
.glass-link {
text-decoration: none;
color: inherit;
display: block;
}
.glass {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 2rem;
padding: 1.5rem;
box-shadow: 0 8px 32px rgba(31, 38, 135, 0.2);
height: 350px;
transition: all 0.4s ease;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.glass:hover {
transform: scale(1.05);
box-shadow: 0 12px 36px rgba(31, 38, 135, 0.3);
}
.card-header {
display: flex;
align-items: center;
gap: 1rem;
}
.icon {
font-size: 1.75rem;
width: 2.75rem;
height: 2.75rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 0.75rem;
background: rgba(255, 255, 255, 0.2);
}
.card-title {
font-size: 1.4rem;
font-weight: 600;
color: white;
}
.card-subtitle {
font-size: 1rem;
color: rgba(255, 255, 255, 0.8);
}
.card-content {
color: white;
font-size: 0.95rem;
line-height: 1.5;
}
.btn-wrapper {
display: flex;
justify-content: center;
margin-top: 1rem;
}
.btn-glass {
padding: 0.75rem 1.5rem;
border-radius: 0.75rem;
background: rgba(255, 255, 255, 0.15);
color: white;
border: 1px solid rgba(255, 255, 255, 0.3);
backdrop-filter: blur(10px);
cursor: pointer;
transition: all 0.3s ease;
font-weight: 500;
}
.btn-glass:hover {
transform: scale(1.05);
background: rgba(255, 255, 255, 0.25);
}
@media (max-width: 768px) {
.card-title { font-size: 1.25rem; }
.card-subtitle { font-size: 0.95rem; }
.glass {
height: auto;
}
}
</style>
</head>
<body>
<div class="parallax-bg" id="parallax-bg"></div>
<div class="fixed-cards">
<div class="container">
<a href="page1.html" class="glass-link">
<div class="glass">
<div class="card-header">
<div class="icon">šµ</div>
<div>
<h3 class="card-title">Today's Hits</h3>
<p class="card-subtitle">Apple Music Hits</p>
</div>
</div>
<div class="card-content">
<p>Fresh songs from your favorite artists. Updated daily for the ultimate vibe.</p>
<div class="btn-wrapper">
<button class="btn-glass">Play Now</button>
</div>
</div>
</div>
</a>
<a href="page2.html" class="glass-link">
<div class="glass">
<div class="card-header">
<div class="icon">š</div>
<div>
<h3 class="card-title">Reminders</h3>
<p class="card-subtitle">3 To-Do Items</p>
</div>
</div>
<div class="card-content">
<ul>
<li>ā Walk the dog</li>
<li>ā Call Mom</li>
<li>ā Water plants</li>
</ul>
<div class="btn-wrapper">
<button class="btn-glass">Edit List</button>
</div>
</div>
</div>
</a>
<a href="page3.html" class="glass-link">
<div class="glass">
<div class="card-header">
<div class="icon">āØ</div>
<div>
<h3 class="card-title">Glassmorphism</h3>
<p class="card-subtitle">Design Aesthetics</p>
</div>
</div>
<div class="card-content">
<p>Glassmorphism brings depth to your UI using blur, transparency, and layering.</p>
<div class="btn-wrapper">
<button class="btn-glass">Discover</button>
</div>
</div>
</div>
</a>
</div>
</div>
<script>
window.addEventListener("scroll", () => {
const scrollY = window.scrollY;
const bg = document.getElementById("parallax-bg");
bg.style.transform = `translateY(${scrollY * 0.3}px)`;
});
</script>
</body>
</html>
You can do things very similar to that in Blocs with built in stuff, background blurs etc., but good to see.
Okay, letās see you or anyone other Blocs use come up with producing similar effects using Blocs. No doubt you have have to use codeā¦
Itās not a competition - I didnāt mean it as fighting talk and apologies if there was any offence, but leave it with me.
Maybe not as polished as yours, but similar.
1 Like
https://www.trevreav.co.uk/TEST/
Here you go. All entirely within Blocs, no code, just using classes.
Iām not very fast at using Blocs, but this took me about 45 minutes of making mistakes!
Admittedly, not as polished as yours, but I think it achieves the brief of āproducing similar effectsā. Given more time, it could have a bit more attention to detail, but close enough.
I havenāt optimised for any other screen sizes other than large, so best viewed on a larger screenā¦
5 Likes
Iām impressed. 
I donāt have those skills, like you. I just like learning, so I play with AI Chats.
By the way, you did not use any JS?
Honestly KB, Iām not that skilled.
These are just using the bits that caught my attention on recent updates as Iām redoing my site and looking to āglass it upā a bit. Itāll look like Iām jumping on the Apple bandwagon now though, but I started it about 4 months ago but keep getting waylaid by other stuff, mainly pet portraits.
Thereās an awful lot of Blocs I donāt use - like the interactions, which I really should get my head around as they look VERY useful.
Basically, thereās a semi transparent background, a transform on hover to 1.05, a transform āeaseā, a very slight outer shadow and an inner glow on the boxes - all built into the class manager, so no external input from me (apart from my fingers and a bit of thinking).
You can do it - go for it! Hereās the file if you want to have a look at the construction of the class(es). Iāve just looked at it again and thereās a more streamlined way on constructing it - but you had me panicking.
TEST.bloc (906.5 KB)
2 Likes
Thanks, Trevor
Thatās really kind of you to allow me to check your work.
1 Like
@KBConcepts, No code (including no JS), and no ācustomā classes, itās a bit unpolished (eg the buttons could use some work.) But I only spent 10mins on it. And I used a build in Bloc.
2 Likes
Thatās because of your skills level. 
Well your challenge was to do it without code, and both @TrevReav and I proved you can. Blocs 5 would require some coded CSS. The real challenge was no crashes 
1 Like
Without true refraction the majority of these effects seen recently are just typical blur / frosted effects. The same can be found from over a decade ago in CSS. Of course more modern CSS has made these effects easier since those days.
The term Glassmorphism came about around 2020 (existed previously though). But if we are being honest these basic blur / frosted effects were in the Windows Vistaās Aero Glass theme in 2006 and assuredly something before that also.
Appleās āLiquid Glassā requires refraction to be accurate, so you at least need SVG Filters, or more appropriate Canvas or WEBGL if you care about performance.
Obviously Blocs has entry points for code but the recent phrase āLiquid Glassā canāt be accomplished in Blocs without adding additional stuff through entry points.
Unless this trend is gonna become an in-built in feature. 
2 Likes
I donāt think anyone was claiming any extensive refraction effect here, especially working within the built in options of the class editor.
You can enhance them even more using masks on the borders etc. As we are just using CSS, of course itās just going to be a fancy blur to make a glassy effect.
At least people are making an effort to learn, which is great.
But I agree, I hope the trend isnāt going to take off 
You just reminded me of something that came before Vista, Web 2.0 glassy glossy buttons. They simulated refraction of themselves. 
I already made a bookmarklet that can instantly shut this stuff off, if desired. 
Yeah haha. I remember making those 20+ years ago. (maybe slightly lessā¦ it was a long time anyway).
OK, couldnāt resist = Coding + Canvas + WebGL + GSAP 
Here is my version of āApple macOS Tahoe 26 Liquid Glassā.
https://jmp.sh/s/7K3Pzr2C3buzzQ9IN0nF
Everything is dynamic so the effect is constantly changing using GSAP. Looks and runs smooth on full screen desktop and across mobile. Maybe a bit over liquified, but itās mesmerizing to watch live. Can be any shape, text, etc.,
The best part is not a single piece of real glass was harmed coding this. 
Appleās designers utilized its industrial design studios to fabricate glass of different opacities and lensing properties, closely matching the interface properties to those of real glass.
3 Likes
Unreal!!
I was just playing and you took it to a whole new level. Talk about skillsā¦ Man!!
1 Like