Solid Glass

A lightweight, customizable glass effect library for modern web applications. Create Apple-like glass effects with dynamic distortion, customizable tints, and smooth animations.

Live Demo & Docs | GitHub

Features

• Fully Customizable: Control every aspect of the glass effect
• Lightweight: Minimal dependencies, ~4KB gzipped core
• Framework Agnostic: Works with vanilla JS, React, and Vue
• Two Engines: CSS-based effects + physics-based SVG refraction
• TypeScript: Full type definitions included

Installation

npm i solid-glass

Quick Start

React

import { Glass } from "solid-glass/react";
import "solid-glass/css";

function App() {
  return (
    <Glass effect="frosted" options={{ blur: 12, tintOpacity: 0.1 }}>
      <h1>Your Content Here</h1>
    </Glass>
  );
}

Vue

<template>
  <Glass effect="crystal" :options="{ blur: 10 }">
    <h1>Your Content Here</h1>
  </Glass>
</template>

<script setup>
import { Glass } from "solid-glass/vue";
import "solid-glass/css";
</script>

Vanilla JS

import { applyGlass } from "solid-glass/vanilla";
import "solid-glass/css";

const element = document.getElementById("my-glass-element");
const cleanup = applyGlass(element, "frosted", {
  blur: 16,
  tintColor: "#ffffff",
  tintOpacity: 0.1,
});

// Later: cleanup();

SVG Refraction Engine

Physics-based glass using Snell-Descartes light bending:

import { createLiquidGlass } from "solid-glass/engines/svg-refraction";

const glass = createLiquidGlass({
  width: 300,
  height: 200,
  surface: "convexSquircle",
  refractiveIndex: 1.5,
  glassThickness: 120,
  bezelWidth: 40,
});

element.style.backdropFilter = glass.filterRef;

API Reference

Options

SVG Engine Options

Browser Support

Inspirations

• Apple's iOS 26 Liquid Glass design
• chakachuk's CodePen for the original glass-distortion filter
• @archisvaze's liquid-glass experiment

License

Apache-2.0

Note: This package is NOT affiliated with Apple.