Theme
Intensity
22%
LUNAG.CSS · v1.0 code @pH-level5
a Glassy CSS Library
Glassmorphism CSS Library

Toned down · Modern but with old-school chill · Fira Code monospace aesthetic

LUNAG.CSS v1.0 MIT

Credits

lunag.css · built on great shoulders

Special Thanks

grain
Grainy Gradients — SVG feTurbulence noise technique
Jimmy Chion · css-tricks.com/grainy-gradients
↗ Visit
blur_on
CSS.Glass — Glassmorphism generator & reference
@miketromba · github.com/miketromba/css.glass
↗ Visit
font_download
Fira Code — Monospace font with ligatures
Nikita Prokopov · fonts.google.com/specimen/Fira+Code
↗ Visit
category
Material Symbols — Icon library
Google Fonts · fonts.google.com/icons
↗ Visit

LUNAG.CSS is released under the MIT License. Free to use, modify, and distribute — attribution appreciated but not required.

Glass Grain

.lna-glass-grain

Default glass

Clean backdrop-filter blur — no texture applied.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fira Code at rest.

Grain glass

SVG fractalNoise overlay · contrast(110%) brightness(250%) · opacity 5.5%

Same panel — add .lna-glass-grain for tactile surface texture.

Typography

.lna-title · .lna-heading · .lna-section-label
lna-title — Display Heading

lna-heading — Section Header

lna-section-label — Category Label

Base body text · Fira Code monospace at 14px. Comfortable for both code and prose.

lna-muted — Secondary information, hints, timestamps.

lna-accent-txt — Highlighted values & accents

Default Success Warning Danger

Buttons

.lna-btn · ::before shine · ::after dot-sweep

Hover to see the shine dissolve through the glass.

Stats Grid

.lna-grid-4 · .lna-card · .lna-stat
timer
Study Hours
124
+5.2%
description
Assignments
18/25
72%
event_upcoming
Upcoming Exams
3
This Week
edit
GPA Average
3.75
+0.15

Progress Bars

.lna-progress-row · .lna-progress-fill · shimmer

Study Progress

Math
78%
Physics
54%
CS
91%
History
32%

Course Progress

Coursera: Machine Learning
65%
Khan Academy: Calculus II
42%
Udemy: Web Development
88%

Forms

.lna-input · .lna-select · .lna-textarea · .lna-upload

Profile Form

Security

Password strength

Toggles & Sliders

.lna-toggle · .lna-pref-row · .lna-slider

Preferences

Email Notifications

Receive updates about courses and assignments

Study Reminders

Get reminded about upcoming study sessions

hourglass_emptyCandlelight Mode

Warm sepia filter for comfortable night reading

Opacity Level

Drag to adjust the backdrop intensity

50%

Activity Feed

.lna-feed · .lna-feed-item · .lna-feed-icon

Upcoming Schedule

warning
Physics Exam — Room 204
Tomorrow, 9:00 AM
Exam
info
Math Assignment Due
Friday, 11:59 PM
Due
check_circle
Study Group — Library B2
Saturday, 2:00 PM
Session
notifications
CS Project Presentation
Next Monday, 10:30 AM
Urgent

Empty State

.lna-empty
menu_book
No items yet

Data will appear here once you connect a backend or add some entries.

// waiting for data…

SVG Matcher & Table

.lna-svg · .lna-table

Global Network — SVG inherits theme color via currentColor

City Country Coordinates Local Time Ping (ms) Status
New York United States 40.71° N, 74.00° W 09:42 EST 14 Online
London United Kingdom 51.50° N, 0.12° W 14:42 GMT 8 Online
Tokyo Japan 35.68° N, 139.69° E 23:42 JST 82 Latency
Sydney Australia 33.86° S, 151.20° E 01:42 AEDT 143 Latency
São Paulo Brazil 23.55° S, 46.63° W 11:42 BRT — Offline

Danger Zone

.lna-danger-zone

Destructive Actions

Delete Account

Permanently removes all your data. Cannot be undone.

Export Data

Download all your data as a JSON archive.