Glassmorphism i CSS — Frostat Glas-effekten Förklarad

Glassmorphism — den frostade glas-UI-trenden — skapar en känsla av djup och elegans med halvtransparenta bakgrunder, backdrop-blur och subtila kanter. Vår generator låter dig finjustera varje parameter (blur, opacitet, kant, skugga) med en levande förhandsvisning mot en färgglad bakgrund, och sedan kopiera produktionsklar CSS.

Vad är Glassmorphism?

Glassmorphism är en UI-designtrend med semi-transparenta element med en frostat glaseffekt. Den kombinerar backdrop-filter: blur(), en semi-transparent bakgrundsfärg, en subtil kant och ofta en lätt skugga för att skapa element som verkar sväva ovanför bakgrunden med en glasliknande kvalitet.

Hur använder du Glassmorphism-generatorn?

Justera bakgrundsopaciteten för att styra transparensen. Ange blurintensiteten för frostad glaseffekt. Finjustera kantopaciteten och skuggan för djup. Förhandsgranska mot en färgglad bakgrundsbild för att se effekten i kontext. Kopiera CSS:en.

Bästa praxis

Glassmorphism behöver en färgglad eller bildbaserad bakgrund för att se bra ut — mot en vanlig vit eller svart bakgrund är effekten osynlig. Lägg till en subtil 1px semi-transparent vit kant för att förstärka glaskantseffekten. Ge alltid en enfärgad fallback för webbläsare som inte stöder backdrop-filter.