kitzos

Glassmorphism Generator

Design frosted-glass CSS effects with live preview. Copy blur, border, and background code.

Glass card

Live preview

background: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 16px;

How to use

  1. 1

    Tune glass effect

    Adjust blur, opacity, and border strength.

  2. 2

    Preview

    See the frosted card on a gradient backdrop.

  3. 3

    Copy CSS

    Paste backdrop-filter and background rules into your design.

Frequently Asked Questions

backdrop-filter works in modern Chromium, Safari, and Firefox.

Related tools

QR Code Generator

Generate QR codes from text or URLs. Download as PNG or SVG.

JSON Formatter

Format, validate, and minify JSON with clear error messages.

Base64 Encoder / Decoder

Encode and decode text or images to Base64. Works entirely offline.

Color Picker

Pick a color and convert between HEX, RGB, and HSL formats.

Timestamp Converter

Convert Unix timestamps to dates and back. Supports seconds and milliseconds.

Hash Generator

Generate MD5, SHA-1, SHA-256, and SHA-512 hashes from any text.

Open Graph Image GeneratorNew

Create 1200×630 OG images for social sharing with custom title and colors.

Favicon GeneratorNew

Generate favicon PNGs in multiple sizes from one image and download as ZIP.

SVG Pattern GeneratorNew

Create repeating SVG background patterns and copy the CSS code.

Box Shadow GeneratorNew

Design CSS box shadows with live preview and copy ready-to-use code.

Signature Generator PNGNew

Draw a transparent signature and download as PNG for documents and forms.

Color Palette GeneratorNew

Generate complementary, analogous, and triadic color palettes from a base color.