Glassmorphism Playground

Subtle
Medium
Heavy
Frosted
Neon
Basic
Advanced
Animation
Colors
#ffffff
#ffffff
#000000
Glassmorphism Effect
CSS
SCSS
Tailwind CSS
React
/* Glassmorphism effect */
.glass {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.25);
}
// Glassmorphism mixin
@mixin glassmorphism(
  $bg-opacity: 0.7,
  $blur: 10px,
  $border-width: 1px,
  $border-opacity: 0.1,
  $radius: 16px,
  $shadow-opacity: 0.25,
  $shadow-blur: 30px,
  $shadow-spread: 0
) {
  background: rgba(255, 255, 255, $bg-opacity);
  backdrop-filter: blur($blur);
  -webkit-backdrop-filter: blur($blur);
  border: $border-width solid rgba(255, 255, 255, $border-opacity);
  border-radius: $radius;
  box-shadow: 0 4px $shadow-blur $shadow-spread rgba(0, 0, 0, $shadow-opacity);
}

.glass {
  @include glassmorphism();
}


import React from 'react';

const GlassmorphicCard = ({ children, className = '' }) => {
  return (
    

      {children}
    

  );
};

export default GlassmorphicCard;