Glassmorphism-generaattori
Free online Glassmorphism Generator tool, no installation required
Tietoa lasiefektigeneraattorista
Tuota lasiefektikorttityyli yhdistämällä läpikuultava taustaväri, valinnainen reunus, pyöristetyt kulmat ja backdrop-filter sumennuksella ja kylläisyydellä. Tuloste on täydellinen katkelma viidestä julistuksesta (background, border, border-radius, backdrop-filter, -webkit-backdrop-filter) esikatseltu livenä kiinteän monipysähdys-gradientin yllä.
Käyttöohje
1. Valitse Taustaväri ja vedä Läpinäkyvyys (0–1 0.05-välein) — nämä yhdessä muodostavat rgba()-taustan. 2. Valitse Reunusväri ja aseta Reunuksen leveys (0–5px) ja Reunuksen säde (0–50px). 3. Aseta Sumennus (1–30px) ja Kylläisyys (100–200%) backdrop-filterille. 4. Napsauta Kopioi kopioidaksesi viisirivisen CSS-katkelman.
Tulostekatkelma
Generoitu CSS sisältää aina viisi riviä: background: rgba(r, g, b, läpinäkyvyys); border: {leveys}px solid {väri}; border-radius: {säde}px; backdrop-filter: blur({sumennus}px) saturate({kylläisyys}%); ja vastaava -webkit-backdrop-filter Safarille. Taustaväri muunnetaan hex-valitsijasta rgba()-arvoksi liukusäätimen läpinäkyvyydellä. Esikatselu käyttää kiinteää viisipysähdys-gradienttia, jota ei voi muuttaa.
▶Miksi ei ole kenttää taustalle lasin takana?
▶Sisältääkö katkelma -webkit-backdrop-filter-etuliitteen?
▶Miksi esikatselu näyttää pelkältä Firefoxissa?
▶Voinko lisätä box-shadows lasiin?
Jos tämä työkalu on ollut sinulle hyödyllinen, harkitse kahvin ostamista.
Osta minulle kahvi