Glassmorfisme-generator
Free online Glassmorphism Generator tool, no installation required
Om Glassmorphism Generator
Produser en glassmorphism-kortstil ved å kombinere en gjennomskinnelig bakgrunnsfarge, valgfri kant, avrundede hjørner og en backdrop-filter med uskarphet og metning. Utdataene er et komplett utdrag med fem deklarasjoner (background, border, border-radius, backdrop-filter, -webkit-backdrop-filter) som forhåndsvises live over en fast flerstoppsgradient.
Slik bruker du det
1. Velg bakgrunnsfargen og dra Opacity (0–1 i 0.05-trinn) — disse danner sammen rgba()-bakgrunnen. 2. Velg en kantfarge og sett Border Width (0–5px) og Border Radius (0–50px). 3. Sett Blur (1–30px) og Saturation (100–200%) for backdrop-filter. 4. Klikk Copy for å kopiere CSS-utdraget på fem linjer.
Utdrag av utdata
Den genererte CSS-en inneholder alltid 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 den matchende -webkit-backdrop-filter for Safari. background-color konverteres fra hex-velgeren til en rgba()-verdi med gliderens opasitet. Forhåndsvisningen bruker en fast femstoppsgradient og kan ikke endres.
▶Hvorfor er det ikke noe felt for bakgrunnen bak glasset?
▶Inkluderer utdraget -webkit-backdrop-filter-prefiksen?
▶Hvorfor ser forhåndsvisningen flat ut i Firefox?
▶Kan jeg legge til en box-shadow på glasset?
Hvis dette verktøyet har vært nyttig for deg, vurder å kjøpe meg en kaffe.
Kjøp meg en kaffe