CSS-glasmorfisme-generator

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, Dark of Vibrant, verfijn de schuifregelaars en kopieer de CSS - inclusief het achtergrondfilter met webkit-voorvoegsel voor bredere ondersteuning. Geen account, geen uploads en het blijft offline werken zodra de pagina is geladen.

Het effect hangt af van twee eigenschappen die samenwerken, en het mislukt stilletjes als een van beide ontbreekt Achtergrondfilter vervaagt wat er achter het element zit, dus het heeft een gedeeltelijk transparante achtergrondkleur nodig om door te laten zien: bij volledige dekking is er niets te zien en zonder enige achtergrond verdwijnt het oppervlak. Het heeft ook iets nodig dat de moeite waard is om te vervagen. Daarom ziet het effect eruit als een plat paneel op een effen achtergrond en komt het tot leven op een foto. Twee praktische kosten Achtergrondvervaging is een van de duurdere dingen om te composeren, vooral over een groot oppervlak of tijdens het scrollen. En tekst op een doorschijnend oppervlak heeft een contrastverhouding die verandert met wat eronder passeert, zodat het een contrastcontrole tegen de ene achtergrond kan doorstaan en tegen de andere kan falen.

Als CSS-generator voor glasmorfisme begint het bij de Frosted-voorinstelling, en het gekopieerde blok voor die voorinstelling luidt: achtergrond: rgba (255, 255, 255, 0,2); achtergrondfilter: vervaging (10px) verzadigd (120%); dezelfde waarde opnieuw als -webkit-backdrop-filter; randradius: 16px; rand: 1px massief rgba (255, 255, 255, 0,18); en doosschaduw: 0 8px 32x 0 lightba 20, en 20 rb.