background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px) saturate(120%);
-webkit-backdrop-filter: blur(10px) saturate(120%);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.18);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);De CSS Glassmorphism Generator is een visuele editor voor de matglazen UI-stijl van frosted, waar een doorschijnend oppervlak vervaagt wat er achter zit. Je past achtergrond onscherpe, vulling transparantie, verzadiging, tintkleur en hoekstraal met schuifregelaars, bekijkt een preview-update over een kleurrijke achtergrond en kopieert de exacte CSS die het produceert.
Glasmorfisme is afhankelijk van de eigenschap backdrop-filter, die een vervaging toepast op de inhoud achter een element in plaats van het element zelf. Gecombineerd met een semi-transparante achtergrond, een haarlijnrand en een zachte schaduw, produceert het de gelaagde glaslook die populair is door moderne besturingssystemen. Het evenwicht met de hand krijgen is lastig, dus deze tool beheert elke waarde en voert een schoon, kopieerbaar blok uit.
Alles draait in uw browser. Kies een voorinstelling zoals frosted, donker of levendig, stem de schuifregelaars fijn af en kopieer de CSS - inclusief het -webkit- vooraf gefixeerde achtergrondfilter voor bredere ondersteuning. Geen account, geen uploads en het blijft offline werken zodra de pagina is geladen.
Begin met mat, licht, donker, levendig of subtiel om een gebalanceerde glaslook te krijgen en verfijn het vervolgens zodat het bij uw ontwerp past.
Sleep de schuifregelaars voor vervaging op de achtergrond, transparantie en verzadiging, kies een tintkleur en stel de hoekstraal in. De preview-updates live over een kleurrijke achtergrond, zodat de onscherpte zichtbaar is.
Zet de haarlijnrand aan of uit. Een subtiele 1px doorschijnende witte rand verkoopt de glazen rand, vooral op donkere achtergronden.
Kopieer het gegenereerde blok — Achtergrond, achtergrondfilter (met -webkit- voorvoegsel), randradius, rand en schaduw — en plak het op uw kaart of paneel.
Een speciale schuifregelaar voor onscherpte drijft het achtergrondfilter aan, dat alles wat achter het element zit bevriest - de kern van het glaseffect
Transparantie, verzadiging, tintkleur, hoekstraal en een optionele haarlijnrand laten u de exacte glazen look inbellen
Het voorbeeld bevindt zich over een kleurrijk verloop, zodat u de achtergrondonscherpte daadwerkelijk kunt zien werken, en wordt onmiddellijk bijgewerkt terwijl u bewerkt
Uitvoer omvat zowel backdrop-filter als het prefix voor -webkit-backdrop-filter, dus het effect werkt in Safari en andere webkit-browsers
Design layered CSS box-shadows with a live preview and sliders for offset, blur, spread, color, opacity, and inset — then copy production-ready CSS.
Create beautiful CSS gradients with live preview
Round any corner with a live preview and per-corner sliders, switch between px, %, em, and rem, and copy the shortest valid CSS border-radius.
0 comments
No comments yet. Be the first to share your thoughts!