CSS Glassmorphism Generator

Create glass-like UI elements using the glassmorphism effect.

Glassmorphism Preview

Glassmorphism

This is how your glassmorphism effect will look.

Settings

Glass Color

Blur Intensity: 10px

Transparency: 0.25

Border Width: 1px

Border Color

Border Radius: 10px

Show Content

Use Custom Background

Generated CSS

.glassmorphism {
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
}

What is Glassmorphism Generator?

The Glassmorphism Generator is a powerful tool for creating glass-like UI elements using the glassmorphism effect. It offers customizable options for shapes, colors, blur intensity, transparency, and more, making it easy to design modern, sleek glass-like components. The tool also provides real-time previews and generates CSS code that you can copy with a single click.

How to Use the Glassmorphism Generator?

Select a glass shape from the dropdown menu (Rectangle, Circle, or Custom).
Adjust the glass color using the color picker or by entering a hex value.
Use the sliders to adjust blur intensity, transparency, border width, and border radius.
Customize the border color using the color picker or by entering a hex value.
Toggle "Show Content" to display or hide sample content in the glass element.
Use "Hide Guides" to remove the guide lines from the preview.
Click "Shuffle Background" to change the preview background image.
Enable "Use Custom Background" to upload your own background image.
Copy the generated CSS or reset to default settings using the buttons at the bottom.

Key Features

Multiple glass shapes: Rectangle, Circle, Custom.
Customizable glass color with color picker and hex input.
Adjustable blur intensity for the glassmorphism effect.
Transparency control for the glass element.
Customizable border width and color.
Border radius adjustment for non-circular shapes.
Option to show/hide sample content within the glass element.
Toggleable guide lines for precise positioning.
Background image shuffling for quick visualization with different images.
Custom background image upload for personalized designs.
Real-time preview of the glassmorphism effect.
Generated CSS code with one-click copy functionality.
Reset option to quickly return to default settings.
Responsive design for use on various devices.