How backdrop-filter Works

backdrop-filter applies a filter effect to the area behind an element, rather than to the element itself. The key is that it filters what’s rendered below the element in the stacking context.

.glass-card {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px) saturate(1.5);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
}

Three things are working together here:

1. Semi-transparent background — lets the element behind show through
2. backdrop-filter blur — blurs what’s behind the element
3. Subtle border — catches the light, gives the glass edge definition

Browser Support

As of 2024, backdrop-filter has ~96% global browser support:

Always include the -webkit- prefixed version for Safari.

Performance Considerations

backdrop-filter is GPU-accelerated but still expensive. Best practices:

/* Add will-change to hint the browser */
.glass-card {
  will-change: transform;
  backdrop-filter: blur(16px);
}

/* Limit the number of blurred elements visible at once */
/* Each backdrop-filter creates a stacking context */

Don’t apply backdrop-filter to hundreds of elements — it gets expensive fast. Apply it to cards, navs, and modals only.

The Fallback Pattern

For browsers without support (rare in 2024, but good practice):

.glass-card {
  background: rgba(20, 20, 40, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

@supports not (backdrop-filter: blur(1px)) {
  .glass-card {
    /* Solid fallback for older browsers */
    background: rgba(20, 20, 40, 0.95);
  }
}

Creating the Aurora Orb Background

The animated orbs in this theme use a simple CSS keyframe animation:

.orb {
  position: fixed;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: hsl(260, 70%, 55%);
  filter: blur(80px);   /* <-- NOT backdrop-filter, just regular blur */
  opacity: 0.45;
  animation: float 22s ease-in-out infinite alternate;
}

@keyframes float {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(40px, 30px) scale(1.08); }
}

The orbs are the background layer. The glass cards then sit above them and blur through with backdrop-filter.

Wrapping Up

Glassmorphism with backdrop-filter is now fully production-ready:

• Wide browser support (96%+)
• GPU accelerated
• Pure CSS — no JS needed

The key to making it look good: generous blur (12–20px), very subtle transparent backgrounds (5–12% opacity), and thin semi-transparent borders.

What is Glassmorphism?

Glassmorphism is a UI trend popularized around 2020–2021. Key characteristics:

• Frosted glass effect — elements appear as translucent frosted surfaces
• Background blur — backdrop-filter: blur() creates the glass illusion
• Subtle borders — thin semi-transparent borders enhance the glass edges
• Depth through layering — colored orbs/shapes visible through the glass

This theme implements all of these properly in pure CSS.

Configuring Your Theme

Open _config.yml and tweak the glass: block:

glass:
  background: "aurora"   # aurora | mesh | bokeh | minimal
  accent_hue: 260        # 0-360 hue (260 = purple, 200 = blue, 150 = green)
  orbs: true             # animated background orbs
  blur: 16               # card blur intensity in px
  reading_progress: true # progress bar on posts

Changing accent_hue shifts the entire color palette — accent colors, tag pills, link highlights, orbs.

Writing Posts

Posts go in _posts/ with the filename format: YYYY-MM-DD-title.md

---
layout: post
title: "My Post Title"
date: 2024-01-15
tags: [tag1, tag2]
description: "Short description for SEO"
---

Your content here...

Code Highlighting

Code blocks get syntax highlighting via Rouge and a copy button automatically:

const glass = document.querySelector('.glass-card');
glass.style.backdropFilter = 'blur(16px)';
console.log('✨ glassmorphism enabled');

def frosted_glass(blur_px: int = 16) -> str:
    return f"backdrop-filter: blur({blur_px}px)"

What’s Next?

• Add your posts to _posts/
• Edit about.md to introduce yourself
• Update _config.yml with your site name, author info, and social links
• Optionally link a custom domain in your repo settings

Enjoy the theme! Any questions or issues → open an issue.