Building a Customizable Glassmorphism Component with React and TypeScript

Prerequisites

To follow along, you should have a baseline understanding of

functional components and hooks. We will use

TypeScript

for prop definitions, so familiarity with interfaces is helpful. You should also have a basic grasp of

CSS

concepts like linear gradients and filters.

Key Libraries & Tools

• Material-UI (MUI): Provides the Box component and the useStyles hook for styling.
• Color: A utility library used to manipulate transparency and color values dynamically.
• clsx: A tiny utility for constructing className strings conditionally.
• TypeScript: Provides static typing to ensure props like blur or color are used correctly.

Code Walkthrough

Defining the Component Base

We start by wrapping the

Box component. By extending BoxProps, our GlassCard inherits standard layout properties like padding and margin.

interface GlassCardProps extends BoxProps {
  color?: string;
  blur?: number;
  noBorders?: boolean;
  square?: boolean;
}

const GlassCard: React.FC<GlassCardProps> = ({ children, color = 'white', blur = 7, ...props }) => {
  const classes = useStyles({ color, blur });
  return <Box className={classes.glass} {...props}>{children}</Box>;
};

Implementing the Glass Style

The magic happens in the useStyles hook. We use a combination of rgba backgrounds and the backdropFilter property. To make the color dynamic, we use the

library to adjust alpha channels on the fly.

const useStyles = makeStyles((theme) => ({
  glass: {
    background: (props) => Color(props.color).alpha(0.2).toString(),
    backdropFilter: (props) => `blur(${props.blur}px)`,
    backgroundImage: (props) => `linear-gradient(to bottom right, 
      ${Color(props.color).alpha(0.3).toString()}, 
      ${Color(props.color).alpha(0).toString()})`,
    border: '1px solid rgba(255, 255, 255, 0.3)',
    boxShadow: '0 8px 32px 0 rgba(31, 38, 135, 0.37)',
  },
}));

Adding Cascading Motion

To create a "slick" feel, we can animate the entry of child elements. By using

.Children.map, we wrap each child in a Grow transition with an incrementing timeout.

{React.Children.map(children, (child, index) => (
  React.isValidElement(child) ? (
    <Grow in timeout={(index + 1) * 200}>
      <div>{child}</div>
    </Grow>
  ) : null
))}

Syntax Notes

Notice the use of string interpolation within the JSS object. This allows us to inject

props directly into

CSS

values. We also utilize the spread operator (...props) to ensure that any standard

Material-UI

attributes passed to our component are forwarded to the underlying Box element.

Practical Examples

This effect is most effective on Authentication Screens or Landing Page Cards where you want to "reel in" users with high-end visuals. It works best over high-contrast, colorful background images where the blur effect is clearly visible.

Tips & Gotchas

• Performance: Extensive use of backdrop-filter can be resource-heavy on older mobile devices. Use it sparingly.
• Readability: Always test your text contrast. If the glass is too transparent, the text might become unreadable against a busy background.
• Dark Mode: Glassmorphism often looks "muddy" in dark mode; it generally performs better in light mode with bright, vibrant backgrounds.