b2KIT

Glassmorphism CSS Generator

Create frosted-glass UI effects with adjustable blur, transparency, and border.

Glass Card

This is a preview of the glassmorphism effect. Adjust the sliders below to customize the appearance.

#FFFFFF
CSS Code
/* Glassmorphism */
background: rgba(255, 255, 255, 0.20);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.30);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.10);

Glassmorphism requires backdrop-filter support. The -webkit-backdrop-filterprefix is included for Safari compatibility. Ensure the element has content behind it for the blur effect to be visible.

How to Use Glassmorphism CSS Generator

  1. 1

    Adjust blur level

    Set the backdrop blur intensity for the glass effect.

  2. 2

    Set transparency

    Adjust the background opacity and border settings.

  3. 3

    Preview the effect

    See the glassmorphism effect applied to a sample card.

  4. 4

    Copy the CSS

    Click copy to grab the CSS for your glassmorphism design.

Related Tools

Color Picker + HEX/RGB/HSL/CMYK

Pick colors visually and convert between HEX, RGB, HSL, and CMYK formats.

Print Color Preview

Preview how screen colors translate to print with CMYK simulation and proofing.

Font Preview Tool

Preview any Google Font at various sizes, weights, and with custom sample text.

CSS Gradient Generator

Create linear, radial, and conic CSS gradients with a visual editor and code output.

Color Palette Generator

Generate harmonious color palettes from a base color using color theory rules.

Color Blindness Simulator

Simulate how colors appear to people with various types of color vision deficiency.