Glassmorphism-generator

Skab en glassmorphism-kort-stil ved at kombinere en translucent baggrundsfarve, valgfri kant, afrundede hjørner og et backdrop-filter med blur og saturation. Outputtet er et komplet snippet med fem erklæringer (background, border, border-radius, backdrop-filter, -webkit-backdrop-filter), der forhåndsvises live over en fast multitops-gradient.

1. Vælg Background Color og træk Opacity (0–1 i 0.05-trin) — disse udgør tilsammen rgba()-baggrunden. 2. Vælg en Border Color og sæt Border Width (0–5px) og Border Radius (0–50px). 3. Sæt Blur (1–30px) og Saturation (100–200%) for backdrop-filteret. 4. Klik på Kopier for at kopiere det fem-linjers CSS-snippet.

Den genererede CSS indeholder altid fem linjer: background: rgba(r, g, b, opacity); border: {width}px solid {color}; border-radius: {radius}px; backdrop-filter: blur({blur}px) saturate({sat}%); og det tilsvarende -webkit-backdrop-filter til Safari. Background-color konverteres fra hex-vælgeren til en rgba()-værdi med skyderens opacity. Forhåndsvisningen bruger en fast fem-trins gradient og kan ikke ændres.