Alle Beiträge

Unsere ganz persönlichen Blogbeiträge.

CSS Remove
2025
Tutorials

Create a Realistic Liquid Glass Water Animation Effect in CSS Using SVG Filters 🌊

Bring your glassmorphism designs to life with a dynamic, water-like motion. This tutorial shows you how to create a realistic liquid glass effect using CSS, SVG filters, and a few lines of JavaScript — no WebGL required. Learn how to combine <feTurbulence> and <feDisplacementMap> to simulate the gentle shimmer of moving water right inside your UI.

Author
Petar Vasilev —
HTML CSS JavaScript English
Tutorials

CSS Liquid Glass How To

Creating a liquid glass effect with CSS is a stylish way to bring depth and modern UI aesthetics to your website. This effect mimics frosted or glossy glass surfaces with fluid-like movement, often combined with blur, transparency, and gradient overlays. In this tutorial, we’ll walk step by step through building a liquid glass effect using only HTML and CSS.

Author
Petar Vasilev —
CSS HTML liquid glass English