v2.0.0

glass.css

Drop-in Glassmorphism for Semantic HTML

Turns your plain HTML into frosted-glass UI — no classes, no reset, no JavaScript. Works perfectly with Pico.css, Simple.css, and other minimal frameworks.

🎨 Pure CSS 📦 ~6KB gzipped 🚫 No JavaScript ♿ Accessible 🌙 Dark & Light Mode 🌈 Aurora Background
Get Started → See Components

⚡ Quick Start

Add glass.css to your project in seconds. Choose your preferred method:

CDN (Recommended)

Add this line to your <head>:

<link rel="stylesheet" href="https://rukkit.net/css/glass.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/glass_ui.css/glass_ui.css">

That's it! Your semantic HTML now has glassmorphism styling.

npm / yarn

npm install glass_ui.css
# or
yarn add glass_ui.css

Then import in your CSS or JS:

@import 'glass_ui.css';
// or
import 'glass_ui.css';

Direct Download

Download the CSS file and include it in your project:

<link rel="stylesheet" href="path/to/glass.css">
Download glass.css

🌗 Dark / Light Mode

glass.css automatically respects prefers-color-scheme. You can also toggle manually:

<!-- Force dark mode -->
<html data-theme="dark">

<!-- Force light mode -->
<html data-theme="light">

<!-- Auto (follows system) - default -->
<html>

✨ Features

🔮

Pure Glassmorphism

Real backdrop-filter blur with frosted glass, refraction highlights, and noise texture.

🏷️

Semantic HTML

No classes needed. Uses native HTML elements like article, section, button.

🎨

CSS Variables

60+ custom properties with --g-* prefix. Fully customizable theming.

🌗

Dark & Light Mode

Auto system detection + manual toggle via data-theme attribute.

🌈

Aurora Background

Animated multi-gradient aurora with noise texture overlay.

📱

Responsive

Mobile-first from 320px up with progressive enhancement.

♿

Accessible

Reduced-motion, high-contrast, focus-visible, skip-link, print styles.

🔌

Framework Compatible

Works with Pico.css, Simple.css, and other minimal frameworks.

Compatible With

🧩 Components

All components work with semantic HTML. No classes required for base styling.

Buttons

Link Button
View Code 
<button>Default Button</button>
<button type="submit">Primary Button</button>
<button disabled>Disabled</button>
<a href="#" role="button">Link Button</a>

<!-- Optional utility classes -->
<button class="outline">Outline</button>
<button class="secondary">Secondary</button>

Badges & Pills

Default Success Warning Error Info
🔮 Frosted ✨ Glass 🌈 Aurora
View Code 
<span class="badge">Default</span>
<span class="badge success">Success</span>
<span class="badge warning">Warning</span>
<span class="badge error">Error</span>

<span class="pill">🔮 Frosted</span>

Forms

View Code 
<form>
  <label for="email">Email</label>
  <input type="email" id="email" placeholder="[email protected]">

  <label for="select">Select Option</label>
  <select id="select">
    <option>Option 1</option>
  </select>

  <label for="range">Range Slider</label>
  <input type="range" id="range" min="0" max="100" value="60">

  <label><input type="checkbox"> I agree</label>
  <button type="submit">Submit</button>
</form>

Cards (Article)

Glass Card

This is a glass card using the semantic <article> element. No classes needed.

Updated 2 hours ago

Another Card

Cards automatically get glassmorphism with blur, refraction highlight, and noise texture.

View Code 
<article>
  <header><h4>Glass Card</h4></header>
  <p>Card content here...</p>
  <footer><small>Updated 2 hours ago</small></footer>
</article>

Table

Name Status Role
Alice Active Developer
Bob Away Designer
Charlie Offline Manager
View Code 
<table>
  <thead>
    <tr><th>Name</th><th>Status</th><th>Role</th></tr>
  </thead>
  <tbody>
    <tr>
      <td>Alice</td>
      <td><span class="badge success">Active</span></td>
      <td>Developer</td>
    </tr>
  </tbody>
</table>

Dialog / Modal

Glass Dialog

This is a native HTML dialog with glassmorphism styling. No JavaScript library needed!
View Code 
<button onclick="document.getElementById('dialog').showModal()">
  Open Dialog
</button>

<dialog id="dialog">
  <header><h3>Dialog Title</h3></header>
  <p>Dialog content...</p>
  <footer>
    <button onclick="dialog.close()">Cancel</button>
    <button type="submit">Confirm</button>
  </footer>
</dialog>

Progress

View Code 
<label>Loading... 70%</label>
<progress value="70" max="100"></progress>

Blockquote

"Design is not just what it looks like and feels like. Design is how it works."

— Steve Jobs
View Code 
<blockquote>
  <p>"Design is not just what it looks like..."</p>
  <footer>— Steve Jobs</footer>
</blockquote>

Animation Utilities

Fade In

Add .fade-in class

Scale In

Add .scale-in class

Slide Up

Add .slide-up class

View Code 
<article class="fade-in">...</article>
<article class="scale-in delay-1">...</article>
<article class="slide-up delay-2">...</article>

<!-- Delay helpers: delay-1 through delay-5 (0.1s increments) -->

🎨 Customization

Override CSS variables to customize the glassmorphism effect:

:root {
  /* Glass effect */
  --g-blur: 24px;
  --g-saturation: 180%;
  --g-bg: rgba(255, 255, 255, 0.06);
  --g-border: rgba(255, 255, 255, 0.12);
  --g-radius: 16px;

  /* Colors */
  --g-text: rgba(255, 255, 255, 0.94);
  --g-accent: #60a5fa;
  --g-accent-gradient: linear-gradient(135deg, #60a5fa, #a78bfa, #f472b6);

  /* Shadows */
  --g-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);

  /* Body background */
  --g-body-bg: #0c0a1a;
}

Key Variables

Variable Default (Dark) Description
--g-blur 24px Blur amount for frosted effect
--g-saturation 180% Color saturation boost
--g-bg rgba(255,255,255,0.06) Glass surface background
--g-border rgba(255,255,255,0.12) Glass border color
--g-radius 16px Border radius
--g-shadow 0 4px 24px rgba(0,0,0,0.25) Box shadow
--g-accent #60a5fa Accent color for links, buttons
--g-accent-gradient linear-gradient(135deg, ...) Gradient for primary buttons
--g-body-bg #0c0a1a Page background color
--g-aurora-1..4 rgba(...) Aurora gradient colours
--g-font system-ui stack Base font family
--g-font-mono monospace stack Monospace font for code

📄 Full HTML Example

Copy this complete example to get started:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Glass Website</title>
  <link rel="stylesheet" href="https://rukkit.net/css/glass.css">
</head>
<body>
  <header>
    <nav>
      <strong>My Site</strong>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <h1>Welcome to Glass</h1>
    <p>Your content automatically gets glassmorphism styling.</p>

    <article>
      <h2>A Glass Card</h2>
      <p>This is semantic HTML styled with glass.css</p>
      <button type="submit">Primary</button>
      <button>Default</button>
    </article>
  </main>

  <footer>
    <p>Made with glass.css</p>
  </footer>
</body>
</html>
Test page (with css)
Test page (without css)
✓ Copied to clipboard!