Glassmorphism Generator

Design

Glassmorphism Generator

Create the popular "glassmorphism" effect for your user interface elements. Customize the blur, transparency, and color to get the perfect look.

Adjust Sliders: Use the sliders to control the blur, transparency, and border radius.
Pick a Color: Choose a tint color for the glass effect.
Live Preview: See your changes applied to the preview box in real-time.
Copy CSS: Once you are happy with the result, click the "Copy" button to get the CSS code.

Controls

Blur10px

Transparency0.20

Border Radius16px

Tint Color

Preview & Code

Preview

background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.18);

Loading Ad...

Related Tools

Explore other tools in the Design category.

Border Radius Generator

Visualize and generate CSS border-radius.

Box Shadow Generator

Generate CSS box shadows visually.

Color Converter

Convert between HEX, RGB, and HSL values.

Color Palette Generator

Generate color palettes from a single color.

Color Shades Generator

Generate lighter and darker shades of a color.

CSS Animation Previewer

Preview CSS animations and get the code to use them.