---
title: "Frostpane"
description: "A customizable, modern CSS/SCSS library for creating beautiful frosted glass effects with backdrop blur, highlights, and smooth animations."
impact: "Drop-in frosted glass effects for any web project"
github_url: "https://github.com/cameronrye/frostpane"
demo_url: "https://cameronrye.github.io/frostpane/"
technologies: ["CSS", "SCSS", "Sass", "UI Design"]
featured: false
order: 12
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."
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."
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"]
metrics: [{"label":"Setup","value":"1 import"}, {"label":"Customizable","value":"100%"}, {"label":"File Size","value":"<5KB"}, {"label":"Dependencies","value":"Zero"}]
canonical_url: https://rye.dev/projects/frostpane/
---

import FrostpaneDemo from '../../components/demos/FrostpaneDemo.astro';

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.

<div class="my-8 p-6 bg-white/60 dark:bg-gray-800/60 backdrop-blur-sm rounded-xl border border-gray-200/50 dark:border-gray-700/50">
  <FrostpaneDemo />
</div>

## Quick Start

Get started with Frostpane in three simple steps:

```bash
npm install frostpane
```

```html
<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:

```css
.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