Glassmorphism Generator

Produce a glassmorphism card style by combining a translucent background color, optional border, rounded corners, and a backdrop-filter with blur and saturation. The output is a complete snippet of five declarations (background, border, border-radius, backdrop-filter, -webkit-backdrop-filter) previewed live over a fixed multi-stop gradient.

1. Pick the Background Color and drag Opacity (0–1 in 0.05 steps) — these together form the rgba() background. 2. Pick a Border Color and set Border Width (0–5px) and Border Radius (0–50px). 3. Set Blur (1–30px) and Saturation (100–200%) for the backdrop-filter. 4. Click Copy to copy the five-line CSS snippet.

The generated CSS always contains five lines: background: rgba(r, g, b, opacity); border: {width}px solid {color}; border-radius: {radius}px; backdrop-filter: blur({blur}px) saturate({sat}%); and the matching -webkit-backdrop-filter for Safari. The background-color is converted from the hex picker to an rgba() value with the slider's opacity. The preview uses a fixed five-stop gradient and cannot be changed.