Frostpane

Drop-in frosted glass effects for any web project

A customizable, modern CSS/SCSS library for creating beautiful frosted glass effects with backdrop blur, highlights, and smooth animations.

CSS SCSS Sass UI Design
View on GitHub Live Demo
Screenshot of Frostpane

The Problem

Creating consistent, cross-browser frosted glass effects requires complex CSS with multiple fallbacks. Developers often spend hours tweaking backdrop-filter, opacity, and border effects to achieve the liquid glass aesthetic without a reliable starting point.

The Solution

Built a drop-in CSS/SCSS library that provides production-ready frosted glass effects out of the box. Fully customizable through SCSS variables, with built-in animations, highlight effects, and graceful fallbacks for older browsers.

The Results

  • Single import adds liquid glass effects to any project
  • SCSS variables for complete customization
  • Smooth animations and highlight effects included
  • Cross-browser compatibility with graceful fallbacks
1 import
Setup
100%
Customizable
<5KB
File Size
Zero
Dependencies

Frostpane is a customizable CSS/SCSS library for creating beautiful frosted glass effects. Add modern liquid glass aesthetics to any web project with backdrop blur, highlights, and smooth animations.

Interactive Demo

Liquid Glass

Adjust the controls to see real-time changes to the frosted glass effect.

Quick Start

Get started with Frostpane in three simple steps:

npm install frostpane
<link rel="stylesheet" href="path/to/frostpane.css">

<div class="glass-container">
  <div class="glass-content">Your content here</div>
</div>

Customization

Frostpane uses CSS custom properties for easy customization. Override these variables to match your design:

.custom-glass {
  --fp-backdrop-blur: 12px;
  --fp-bg-color: rgba(255, 255, 255, 0.2);
  --fp-border-radius: 16px;
  --fp-filter-saturate: 180%;
  --fp-border-color: rgba(255, 255, 255, 0.3);
}

Key Features

  • Frosted Glass Effects: Beautiful backdrop blur and glass aesthetics
  • CSS Custom Properties: 30+ variables for complete customization
  • SCSS Variables: Full Sass/SCSS support with configurable variables
  • Smooth Animations: Built-in transitions and animation effects
  • Zero Dependencies: Lightweight, no JavaScript required
  • Cross-Browser Support: Graceful fallbacks for older browsers

Was this helpful?