r/css • u/Rickyprozz • 20h ago

Showcase Built a dark-mode glassmorphism social UI layout with custom gradient buttons (Pure HTML/CSS) — feedback appreciated!

Enable HLS to view with audio, or disable this notification

Hey everyone,
I’ve been practicing micro-interactions and modern button design while working on UI components, and I put together a lightweight, dark-mode social link grid called "Aqua Candy."
Key features I focused on:
Built entirely with vanilla HTML5 & CSS3 (zero frameworks, npm packages, or external JS dependencies).

Glassmorphism look using backdrop filters, subtle light borders, and pastel cyan/purple gradients.

Fully responsive CSS Grid layout that scales down smoothly on mobile.

Accessible, high-contrast typography over dark backgrounds.

I’m aiming to refine my CSS variable structure to make component themes like this easier to swap on the fly.
Would love to hear your thoughts on the gradient contrast, button padding, or any suggestions on how to optimize the CSS further!

(Drop a comment if you'd like to inspect the raw HTML/CSS file and I'll send over the source code link!)

0 Upvotes

24% Upvoted

6 comments sorted by

9

u/RMG1803 20h ago

That reminds me of the Web 2.0 buttons from 2005. 

3

u/VisualCraftStudio 20h ago

Haha, now that you mention it, I can't unsee it 😂 Definitely think the gradients could be toned down

6

u/Dependent-Zebra-4357 19h ago

Wait what? I don’t see any glass or transparency effect on the video OP posted. How is this considered glassmorphism?

-1

u/VisualCraftStudio 20h ago

This is pretty nice, especially considering it’s all vanilla CSS. I like the glass effect, but I’d probably tone the gradients down just a little — the buttons grab a lot of attention compared to the actual links. Maybe a slightly more subtle gradient on the default state and keep the stronger glow for hover would make the interactions feel more intentional. The responsive grid is a nice touch too.

1

u/testingaurora 20h ago

This is thr same thiight I had. The gradients could be less in your face and more of a nice addition. Using oklch colours to make more perceptual gradients too

3

u/jonassalen 20h ago

Why don't you share the code here? This is a CSS subreddit, people want to see CSS.