Glassmorphism-generator
Glassmorphism-generatorn skapar effekten av frostat glas med CSS backdrop-filter och låter dig justera oskärpa, bakgrundens opacitet, mättnad, kantens opacitet, radie och tonfärg med förhandsvisning i realtid.
Om verktyget
Glassmorphism-generatorn skapar effekten av frostat glas med CSS backdrop-filter och låter dig justera oskärpa, bakgrundens opacitet, mättnad, kantens opacitet, radie och tonfärg med förhandsvisning i realtid.
Så använder du det
- Välj glasets tonfärg.
- Justera oskärpa, opacitet och mättnad.
- Ställ in kantens opacitet och border-radius.
- Klicka på Copy CSS.
Bra att veta
- Effekten använder backdrop-filter: blur() saturate(), som gör allt bakom elementet suddigt.
- En halvgenomskinlig bakgrund (rgba) behövs, annars syns inte oskärpan.
- Den genererade CSS:en innehåller prefixet -webkit-backdrop-filter för Safari.
- Glaseffekten fungerar bäst över färgglada bakgrunder eller bilder; på enfärgade ytor syns inte oskärpan.
- Håll koll på textkontrasten – genomskinliga paneler kan hamna under WCAG-kontrast över livliga bakgrunder.
Körs helt i din webbläsare – inget du skriver in laddas upp eller sparas.
Vanliga frågor
Hur gör jag en glaseffekt i CSS?
Ge elementet en halvgenomskinlig bakgrund, till exempel rgba(255,255,255,0.15), och backdrop-filter: blur(12px); verktyget skriver hela regeln.
Varför fungerar inte min backdrop-filter?
Elementet behöver en genomskinlig eller halvgenomskinlig bakgrund, och det måste finnas något bakom det att göra suddigt. Safari behöver också prefixet -webkit-.
Är glassmorphism tillgängligt?
Det kan vara det, om texten behåller tillräcklig kontrast. Testa textfärgerna över den livligaste delen av bakgrunden.
Försämrar backdrop-filter prestandan?
Oskärpa är GPU-krävande, så undvik att använda den på mycket stora ytor eller många element samtidigt, särskilt på enklare mobiler.