Frostpane Logo

Beautiful frosted glass effects for modern web interfaces

Create stunning glassmorphic UI components with customizable blur, transparency, and shadows. Built with pure CSS, fully responsive, and ready to use in any project.

View on GitHub
Quick Install
npm install frostpane
v1.2.0
Latest Version
Zero
Dependencies
~8KB
Bundle Size
MIT
License

Why Choose Frostpane?

The modern solution for glassmorphic UI design

Pure CSS Solution

No JavaScript required. Lightweight, performant, and works everywhere. Just add classes and customize with CSS variables.

30+ Customization Options

Fine-tune every aspect with CSS custom properties. From blur intensity to shadow depth, you have complete control.

GPU-Accelerated

Optimized for smooth 60fps animations. Uses hardware acceleration and efficient CSS properties for best performance.

Framework Agnostic

Works with React, Vue, Angular, Svelte, or vanilla HTML. Import as CSS or SCSS - your choice.

Accessibility First

Respects prefers-reduced-motion, includes focus states, and maintains proper contrast ratios for readability.

Open Source & Free

MIT licensed. Use it in personal or commercial projects. Contribute on GitHub and help make it better.

Easy to Customize

Fine-tune every aspect using CSS variables. Adjust blur intensity, colors, shadows, and more.

Fully Responsive

Works seamlessly across all devices and screen sizes with built-in responsive utilities.

Performance First

Optimized for smooth animations and GPU-accelerated effects without compromising speed.

Interactive Components

See Frostpane in action with these interactive examples

Music Player Widget

Midnight Dreams

Luna & The Echoes
Navigation Bar
Home
Explore
Favorites
Profile
Action Buttons
Search
Notifications
Settings

Getting Started

Quick guide to using Frostpane

Quick Start with CDN (Recommended)

The fastest way to get started! Just add a single line to your HTML and you're ready to go.

Complete HTML Example

Copy and paste this complete example to get started instantly:

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Frostpane Demo</title>

  <!-- Frostpane CSS from jsDelivr CDN -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/frostpane@1/dist/frostpane.css">
</head>
<body>
  <div class="glass-container glass-container--rounded">
    <div class="glass-content">
      <h1>Hello, Frostpane!</h1>
      <p>Beautiful frosted glass effects with zero configuration.</p>
    </div>
  </div>
</body>
</html>

CDN Options

Choose your preferred CDN provider:

jsDelivr (Recommended)

Fast, reliable, and automatically serves the latest version.

HTML 
<!-- Latest version (automatically updates to newest 1.x release) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/frostpane@1/dist/frostpane.css">

<!-- Specific version (locked to 1.1.0) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/frostpane@1.1.0/dist/frostpane.css">

<!-- Core version (minimal, no utility classes) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/frostpane@1/dist/frostpane-core.css">

<!-- Unminified (for development/debugging) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/frostpane@1/dist/frostpane.unminified.css">

unpkg

Simple and straightforward CDN for npm packages.

HTML 
<!-- Latest version -->
<link rel="stylesheet" href="https://unpkg.com/frostpane@1/dist/frostpane.css">

<!-- Specific version -->
<link rel="stylesheet" href="https://unpkg.com/frostpane@1.1.0/dist/frostpane.css">

<!-- Core version -->
<link rel="stylesheet" href="https://unpkg.com/frostpane@1/dist/frostpane-core.css">

Available File Variants

Choose the right build for your needs:

  • frostpane.css - Full version with all components and utilities (minified, ~8KB)
  • frostpane-core.css - Core version with base styles only (minified, ~4KB)
  • frostpane.unminified.css - Full version, unminified for debugging
  • frostpane-core.unminified.css - Core version, unminified for debugging

Version Pinning Best Practices

  • @1 - Automatically gets the latest 1.x version (recommended for most projects)
  • @1.1.0 - Locks to a specific version (use for production stability)
  • @latest - Always gets the newest version (may include breaking changes)

Installation via npm

For projects using a build system or package manager.

1. Install the Package

Install Frostpane via npm:

Bash 
npm install frostpane

2. Import the CSS

Add Frostpane to your project:

HTML/JS/CSS 
<!-- In your HTML -->
<link rel="stylesheet" href="node_modules/frostpane/dist/frostpane.css">

<!-- Or import in your JavaScript/CSS -->
import 'frostpane/css';

/* Or in your CSS/SCSS */
@import 'frostpane/css';

3. Using SCSS Source Files

For advanced customization, import the SCSS source:

SCSS 
// Import full version
@use 'frostpane/scss' as frostpane;

// Import core version only
@use 'frostpane/scss/core' as frostpane;

// Override variables before importing
@use 'frostpane/scss' as frostpane with (
  $fp-bg-color: rgba(0, 0, 0, 0.4),
  $fp-backdrop-blur: 12px
);

Basic Usage

Create Glass Containers

Start building with glass containers:

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

Customize with CSS Variables

Override default styles using CSS custom properties:

CSS 
.my-glass {
  --fp-bg-color: rgba(0, 0, 0, 0.4);
  --fp-backdrop-blur: 12px;
  --fp-border-radius: 1rem;
}

Use Modifier Classes

Apply pre-built variations:

HTML 
<!-- Different sizes -->
<div class="glass-container glass-container--small">Small</div>
<div class="glass-container glass-container--medium">Medium</div>
<div class="glass-container glass-container--large">Large</div>

<!-- Different shapes -->
<div class="glass-container glass-container--rounded">Rounded</div>
<div class="glass-container glass-container--pill">Pill</div>

<!-- Interactive states -->
<div class="glass-item glass-item--active">Active Item</div>
<div class="glass-item glass-item--hover">Hover Effect</div>

Examples

Explore different glass effect variations

Dark Glass

A darker glass effect perfect for dark mode interfaces.

Dark Mode
CSS 
.dark-glass {
  --fp-glass-bg: rgba(0, 0, 0, 0.4);
  --fp-glass-highlight: rgba(255, 255, 255, 0.3);
  --fp-glass-blur: 8px;
}

Strong Blur

Enhanced blur for a more pronounced frosted effect.

Enhanced Blur
CSS 
.strong-blur {
  --fp-glass-blur: 12px;
  --fp-glass-saturate: 150%;
}

Elevated Shadow

Deeper shadows create a floating effect.

Floating Effect
CSS 
.elevated-glass {
  --fp-glass-shadow-offset-y: 12px;
  --fp-glass-shadow-blur-primary: 12px;
  --fp-glass-shadow-blur-secondary: 30px;
}

Minimal Glass

Subtle effect with reduced blur and transparency.

Subtle Effect
CSS 
.minimal-glass {
  --fp-glass-blur: 2px;
  --fp-glass-bg: rgba(255, 255, 255, 0.15);
  --fp-glass-shadow-blur-primary: 4px;
}

Colored Glass

Add color tints to create unique glass effects.

Blue Tint
CSS 
.colored-glass {
  --fp-glass-bg: rgba(102, 126, 234, 0.3);
  --fp-glass-highlight: rgba(255, 255, 255, 0.5);
  --fp-glass-saturate: 140%;
}

Frosted Glass

Heavy frost effect with maximum blur.

Heavy Frost
CSS 
.frosted-glass {
  --fp-glass-blur: 16px;
  --fp-glass-bg: rgba(255, 255, 255, 0.35);
  --fp-glass-brightness: 1.2;
}

Sharp Corners

Angular design with minimal border radius.

Angular Design
CSS 
.sharp-glass {
  --fp-glass-border-radius: 0.5rem;
  --fp-glass-blur: 6px;
  --fp-glass-shadow-blur-primary: 8px;
}

Pill Shape

Fully rounded pill-shaped glass elements.

Rounded Pill
CSS 
.pill-glass {
  --fp-glass-border-radius: 50px;
  --fp-glass-blur: 6px;
}

Snappy Animations

Fast, responsive animations for interactive elements.

Fast Response
CSS 
.snappy-glass {
  --fp-transition-duration: 0.15s;
  --fp-transition-timing: ease-out;
}

Components

Pre-built component patterns

Music Player

A sleek music player widget featuring album artwork, track information, and playback controls. Perfect for music apps and media interfaces.

Cosmic Journey

Stellar Waves
HTML 
<div class="glass-container glass-container--rounded glass-container--large">
  <div class="glass-content">
    <div class="player">
      <div class="player__thumb">
        <div class="player__img"></div>
        <div class="player__legend">
          <h3 class="player__legend__title">Cosmic Journey</h3>
          <span class="player__legend__sub-title">Stellar Waves</span>
        </div>
      </div>
      <div class="player__controls">
        <i class="fa-solid fa-backward-step"></i>
        <i class="fa-solid fa-play"></i>
        <i class="fa-solid fa-forward-step"></i>
      </div>
    </div>
  </div>
</div>

Navigation Bar

Elegant horizontal navigation with smooth hover effects. Includes icon and text labels for clear wayfinding in your application.

Home
Explore
Favorites
Profile
HTML 
<div class="glass-container glass-container--rounded glass-container--medium">
  <div class="glass-content">
    <div class="glass-item glass-item--active">
      <i class="fa-solid fa-house"></i>
      Home
    </div>
    <div class="glass-item">
      <i class="fa-solid fa-compass"></i>
      Explore
    </div>
    <div class="glass-item">
      <i class="fa-solid fa-heart"></i>
      Favorites
    </div>
    <div class="glass-item">
      <i class="fa-solid fa-user"></i>
      Profile
    </div>
  </div>
</div>

Icon Dock (with Lens Filter)

macOS-inspired application dock with SVG lens distortion effect. Features smooth hover animations and magnification for an enhanced user experience.

HTML 
<div class="glass-container">
  <div class="glass-content">
    <a class="glass-content__link" href="#">
      <i class="fa-solid fa-folder"></i>
    </a>
    <a class="glass-content__link" href="#">
      <i class="fa-solid fa-map-location-dot"></i>
    </a>
    <a class="glass-content__link" href="#">
      <i class="fa-solid fa-message"></i>
    </a>
    <a class="glass-content__link" href="#">
      <i class="fa-solid fa-compass"></i>
    </a>
    <a class="glass-content__link" href="#">
      <i class="fa-solid fa-book"></i>
    </a>
  </div>
</div>

<!-- Required SVG Filter -->
<svg aria-hidden="true" width="0" height="0" style="position: absolute;">
  <filter id="lensFilter">
    <feGaussianBlur stdDeviation="0.6"/>
    <feColorMatrix type="saturate" values="1.2"/>
  </filter>
</svg>

Action Buttons

Versatile glass buttons perfect for search, notifications, settings, and other common actions. Compact design with clear iconography.

Search
Alerts
Download
HTML 
<div class="glass-container glass-container--small">
  <div class="glass-content">
    <i class="fa-solid fa-magnifying-glass"></i>
    Search
  </div>
</div>

<div class="glass-container glass-container--small">
  <div class="glass-content">
    <i class="fa-solid fa-bell"></i>
    Alerts
  </div>
</div>

<div class="glass-container glass-container--small">
  <div class="glass-content">
    <i class="fa-solid fa-download"></i>
    Download
  </div>
</div>