Glass Cards: frosted glass with a spotlight that follows the mouse

How to use it

1. Add the stylesheet

<link rel="stylesheet" href="glass.css">

2. Give a card the class

<div class="glass">
  <h3>Starter</h3>
  <p>One page, animated, ready in days.</p>
</div>

The glass is pure CSS. It works without any script.

3. Add the spotlight

Load the script and put data-glass-spot on the element that wraps your cards.

<div class="cards" data-glass-spot>
  <div class="glass"> ... </div>
  <div class="glass"> ... </div>
  <div class="glass"> ... </div>
</div>

<script src="glass.js" defer></script>

All cards in the wrapper react to the same pointer. That is what makes the edge of the neighbour card glow. For a single card, put data-glass-spot on the card itself.

Glass needs a background

This is the one thing people get wrong. Glass only looks like glass when something colourful is behind it: a photo, a gradient or coloured shapes. On a plain white or black page it is just a grey box.

.hero {
  background: url(photo.jpg) center / cover;
  /* or a gradient: */
  background: linear-gradient(135deg, #7c5cff, #22d3ee 55%, #ff5c8a);
}

The six styles

<div class="glass glass-tint" style="--glass-color: #ff5c8a"> ... </div>

Change the look

Every value is a CSS variable. Set it on one card, or on a parent to change all cards inside.

.glass {
  --glass-blur: 24px;
  --glass-bg: rgba(255, 255, 255, .12);
  --glass-border: rgba(255, 255, 255, .3);
  --glass-radius: 12px;
  --glass-spot: rgba(34, 211, 238, .3);
  --glass-spot-size: 420px;
}

Button and pill

<a class="glass glass-btn" href="/contact">Get in touch</a>
<span class="glass glass-pill">Online</span>

Use the spotlight from JavaScript

var spot = GlassSpot(document.querySelector('.cards'));

spot.refresh();          // call after you add cards
spot.move(400, 300);     // light a point yourself (screen position)
spot.off();              // switch the light off
GlassSpot.init();        // start wrappers that were added later

Good to know

• Readable text comes first. If text is hard to read, raise --glass-bg or use glass-frost. Pretty glass with unreadable text is a bad trade.
• Do not stack many blurs. Background blur is work for the graphics card. Ten cards are fine. A hundred blurred list rows make phones slow.
• Older browsers. Where background blur is missing, the cards become solid, so the text stays readable.
• Phones. The light follows a finger while it touches the cards and fades when it lifts.
• It is cheap. The script only sets two numbers per card, at most once per frame, and does nothing while the pointer is away.

Common questions

My card is not blurred at all.

There is nothing behind it to blur, or a parent has overflow with its own background. Put the colourful background on a parent of the card, not on the card.

The edge glow is missing.

The card needs the script and data-glass-spot on itself or on a wrapper. Also check that your own CSS does not set overflow: hidden with ::after rules on the card.

Does it work in WordPress or Shopify?

Yes. Add the two files to your theme and give any block or section the class glass. Most page builders have an "extra CSS class" field for that.

What is in the download

• glass.css the cards, variants, button and pill, about 4 KB
• glass.js the spotlight, about 3 KB. Leave it out if you only want the glass.
• index.html and demo.css the demo page you see above
• README.txt and LICENSE.txt the short guide and the MIT licence

Licence

MIT licence. Use it in personal and commercial projects, change it as you like. A link back is welcome and not required.