Glassmorphism CSS Elements

🔮 Glass Cards

Standard Glass

Medium blur, elegant

Small Blur

Subtle frosted effect

Large Blur

More frosted appearance

Extra Large Blur

Maximum frosted effect

		<div class="glass">...</div>

		<div class="glass-sm">...</div>

		<div class="glass-lg">...</div>

		<div class="glass-xl">...</div>

🎨 Colored Glass Cards

Primary Glass

Purple tint

Secondary Glass

Pink tint

Success Glass

Green tint

Warning Glass

Orange tint

Danger Glass

Red tint

Info Glass

Blue tint

		<div class="glass-primary">...</div>

		<div class="glass-secondary">...</div>

		<div class="glass-success">...</div>

		<div class="glass-warning">...</div>

		<div class="glass-danger">...</div>

		<div class="glass-info">...</div>

🔘 Glass Buttons

		<button class="glass-btn">Standard</button>

		<button class="glass-btn glass-btn-primary">Primary</button>

		<button class="glass-btn glass-btn-sm glass-btn-pill">Small Pill</button>

		<button class="glass-btn glass-btn-icon">⭐</button>

✍️ Glass Inputs

Standard Input

Primary Focus

Textarea

		<input class="glass-input" placeholder="...">

		<input class="glass-input glass-input-primary" placeholder="...">

		<textarea class="glass-input glass-textarea" placeholder="..."></textarea>

🏷️ Glass Badges

Standard

Primary Secondary

Success Warning

Danger Outline

		<span class="glass-badge">Standard</span>

		<span class="glass-badge glass-badge-primary">Primary</span>

		<span class="glass-badge glass-badge-success">Success</span>

🧭 Glass Navigation

		<nav class="glass-nav glass-nav-horizontal">

		  <a href="#" class="glass-nav-item glass-nav-item-active">Home</a>

		  <a href="#" class="glass-nav-item">About</a>

		</nav>

🚨 Glass Alerts

ℹ️

Info: This is an informational alert.

✅

Success: Your changes have been saved.

⚠️

Warning: Please review before proceeding.

❌

Error: Something went wrong.

		<div class="glass-alert glass-alert-success">

		  <span>✅</span>

		  <div><strong>Success:</strong> Message</div>

		</div>

👤 Glass Avatars

JD

AB

XY

ZK

		<div class="glass-avatar glass-avatar-sm">JD</div>

		<div class="glass-avatar">AB</div>

		<div class="glass-avatar glass-avatar-lg">XY</div>

		<div class="glass-avatar glass-avatar-xl">ZK</div>

📊 Glass Progress Bars

30% Complete

60% Complete

90% Complete

		<div class="glass-progress">

		  <div class="glass-progress-bar" style="width: 60%;"></div>

		</div>

🔘 Glass Toggle

Toggle Demo

		<div class="glass-toggle"></div>

		<div class="glass-toggle glass-toggle-active"></div>

💡 Glass Tooltip

		<span class="glass-tooltip" data-tooltip="Your text">

		  <button class="glass-btn">Hover</button>

		</span>

📋 Glass Dropdown

		<div class="dropdown glass-dropdown">

		  <button class="glass-btn">Dropdown ▼</button>

		  <div class="glass-dropdown-menu">

		    <a href="#" class="glass-dropdown-item">Profile</a>

		  </div>

		</div>

💀 Glass Skeleton Loading

		<div class="glass-skeleton glass-skeleton-avatar"></div>

		<div class="glass-skeleton glass-skeleton-title"></div>

		<div class="glass-skeleton glass-skeleton-text"></div>

		<div class="glass-skeleton glass-skeleton-image"></div>

✨ Glass Hover Effects

Lift Effect

Rises on hover

Scale Effect

Grows on hover

Glow Effect

Glows on hover

Tint Effect

Colors on hover

		<div class="glass glass-hover-lift">Lift</div>

		<div class="glass glass-hover-scale">Scale</div>

		<div class="glass glass-hover-glow">Glow</div>

		<div class="glass glass-hover-tint">Tint</div>

🌈 Glass Gradient Border

Gradient Border

Animated rainbow border

Standard Glass

Compare the difference

		<div class="glass-gradient-border">

		  Your content here

		</div>

📋 How to Use in WordPress

Step 1: Add the CSS

Copy the entire contents of glass.css and paste it into:

WordPress Dashboard → Appearance → Customize → Additional CSS
OR use a plugin like "Simple Custom CSS"

Step 2: Create a Colorful Background

Glassmorphism works best with colorful backgrounds! Add this to your page:

background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

Step 3: Add Glass Elements

Use the HTML classes in your content:

		  <div class="glass">

		    <h3>Glass Card</h3>

		    <p>Your content here</p>

		  </div>

Step 4: Customize

Adjust the glass tokens at the top of the CSS:

		  :root {

		    --glass-blur-md: 16px;  /* Adjust blur amount */

		    --glass-opacity-3: 0.15; /* Adjust transparency */

		  }

🌙 Dark Mode

Click the button to toggle dark mode:

Light Mode Card

Switch to dark mode to see difference

Primary Glass

Tints work in both modes