GitHub - Explosion-Scratch/realglass: Beautiful Glassmorphism

1 min read Original article ↗

1. Include the library

2. Apply the effect

const myElement = document.getElementById('my-glass-element');

const realGlass = new RealGlass();

// The init call screenshots the page and sets up listeners for resize
await realGlass.init();

// Apply the effect with custom options
await realGlass.apply(myElement, {
  frosting: 0.2,
  borderRadius: 20,
  lightStrength: 1.8,
  // ... and many more options
});

// To create another instance, pass in the first one as an argument, 
// this way it screenshots the page once and reuses the same image for all instances
/*
const anotherRealGlass = new RealGlass(realGlass);
await anotherRealGlass.init();
await anotherRealGlass.apply(myElement, {
  frosting: 0.2,
  borderRadius: 20,
  lightStrength: 1.8,
  // ... and many more options
});
*/