Liquid Glass CSS Generator

What it does

Free tool that bends the page behind your element in real time using backdrop-filter and SVG feDisplacementMap. The distortion follows the scroll. Copy ready-to-paste HTML/CSS for liquid glass buttons and cards.

Build transparent glass buttons and cards that refract the live page using backdrop-filter + SVG feDisplacementMap. Copy the HTML/CSS and paste it in. For how to use it, the difference from the WebGL version, and FAQ, see the how-to guide . Need the baked-background WebGL version? Try the Liquid Glass Generatorfrom codequest.work

• 
  CSS generator for a high-def glass effect2025 · glass3d.dev · ▲420

  There are lots of glassmorphism generators out there, but I wanted to push the effect further! This project is the result of months of experimenting with CSS property layering and battling browser quirks. Cross-browser compatibility is actually the reason I rely on ::before and ::after pseudo-elements to build up the effect. Move the color/opacity to the main element, and you’ll get weird color bleed on the corners in Chrome. Move the texture, and it muddles the bevel’s specular highlight. Move the bevel, and it gets blurred out by the backdrop-filter. And so on! Layers include: *…

• 
  Glass UI Generator2021 · ▲472

  CSS generator for glassmorphism

• 
  CSS Glassmorphism Generator2023 · ▲77

  Create stunning, transparent UI designs in seconds

• 
  Glassmorphism CSS Generator2021 · hype4.academy · ▲187

  Generate the CSS for frosted glass effect for free.

• 
  Liquid Glassifier2025 · glass.danilofiumi.com · ▲230

  Bring liquid glass to your site with a single copy-paste

• 
  Wave Generator2024 · wavegenerator.app · ▲156

  CSS clip path for containers

• 
  /dev/null▲484

  a social network for devs

  Dev tools · 3d ago · dev-null.sh

• 
  Whiteboard (YC W26) – an open-source IDE for thoughtful software design▲423

  open-source IDE for thoughtful software design. Contribute to devdotfast/whiteboard development by creating an account on GitHub.

  Dev tools · 28d ago · github.com

• 
  Reladraw – A diagram language where you decide where to place things▲411

  Contribute to reladraw/reladraw development by creating an account on GitHub.

  Dev tools · 26d ago · github.com

• 
  OpenBot▲362

  Grok Bot alternative: free, local, open-source, multiplayer

  Dev tools · 23d ago · openbot.run

• 
  Talanoa▲346

  Hi HN, I’m a fullstack developer, and honestly, I’ve lost count of how many side projects I’ve worked on over the years. But one idea kept coming back to me: a different kind of email client. It first came to me in 2014: “What if we could handle emails more like conversations?” Every year, I’d revisit this concept in my “Build Notes.” Ten years later, no one had built exactly what I had in mind — so I finally decided to do it myself. That’s how Talanoa was born. I wanted something focused on people, not timelines. I was tired of marking messages as unread just to remember to reply later, or…

  Dev tools · 21d ago · talanoa.email

• 
  CoreSpeed▲332

  One MCP for everything your agents need: apps, memory, tools

  Dev tools · 28d ago · corespeed.io

• 
  Fundraisly▲1,537

  AI fundraising agent that finds investors and books meetings

  AI · Jun 2026 · fundraisly.com

• 
  Homebrew 6.0.0▲1,481

  Today, I’m proud to announce Homebrew 6.0.0. The most significant changes since 5.1.0 are a new tap trust security mechanism, the new faster, smaller, default internal Homebrew JSON API, sandboxing on Linux, better defaults informed by our user survey, many brew bundle improvements, improved performance and initial support for macOS 27 (Golden Gate). Happy to discuss any questions here!

  Dev tools · Jun 2026 · brew.sh

• 
  Performative-UI – A react component library of design tropes▲1,181

  Hi HN! I was super frustrated at apps like tiktok and wechat preventing me from saving or downloading the animated gifs, so I made a little tool to turn a screen recording into a slack-sized emoji. Hope you get some value from this!

  Life & fun · Jun 2026 · vorpus.github.io

• 
  Upstream▲976

  The inbox designed for humans and agents

  AI · Jun 2026 · upstream.do

• 
  Goldfish▲958

  Press Option. It knows your work and replies like you

  AI · Jun 2026 · goldfish.sh

• 
  I made Google Trends for Hacker News by indexing 18 years of comments▲822

  Search 18 years of Hacker News and chart how any topic, tool, or person trended. Overlay terms to compare their rise and fall across 45M posts and comments.

  Life & fun · Jun 2026 · hackernewstrends.com