Glasmorfisme CSS-generator
Genereer CSS voor bevroren glaspanels of zachte neumorfische oppervlakken met enkele schuifregelaars – geen codering nodig.
Glasmorfisme CSS-generator
Maak een volledige, kant-en-klare CSS-regel voor een bevroren glaspaneel of een zachte neumorfische oppervlakte zonder handmatig waarden in te voeren. Kies glasmorfisme voor een halfgekleurde kaart die alles erachter vervaagt – de look die in moderne dashboards, aanmeldingspagina's en modale vensters wordt gebruikt – of neumorfisme voor een oppervlak dat eruit ziet alsof het uit hetzelfde materiaal als de achtergrond is gevormd, met behulp van twee tegengestelde zachte schaduwen in plaats van transparantie.
De opties kaarten rechtstreeks toe aan de eigenschappen die het gereedschap schrijft. In de glaspaneel-modus bepalen de oppervlakte-opaciteit en onscherpte sterkte de achtergrond-alfa en backdrop-filter blur, terwijl de randdikte en randhelderheid een dunne, halfdoorzichtige rand instellen die het paneel tegen drukke achtergronden leesbaar houdt. De schaduwafstand en -zachtheid bepalen de drukshaduw onder het paneel, en de vormschakelaar schakelt deze over naar een ingezette schaduw voor een ingezonken uiterlijk. In de neumorfisme-modus drijven dezelfde schaduwafstands- en -zachtheidswaarden een lichte en donkere schaduw aan die op basis van uw oppervlaktekleur wordt berekend, verheven of ingedrukt afhankelijk van de vorm die u kiest. Hoekafronding en een donkere modus variant gelden voor beide stijlen.
Omdat een bevroren of zachtschaduwd oppervlak in een middeltoon kan landen die moeilijk met zwart of wit leesbaar is, controleert het hulpprogramma het resulterende contrast en voegt bovenaan de CSS een korte waarschuwingsopmerking toe wanneer geen van de tekstkleuren comfortabel boven WCAG AA zou passen – een aanwijzing om de oppervlaktekleur of opaciteit aan te passen in plaats van te raden.
Alles wordt lokaal in uw browser uitgevoerd terwijl u de schuifregelaars verplaatst – geen ontwerptool, geen account en niets wat naar een server wordt verzonden. Kopieer de CSS rechtstreeks naar uw stylesheet, download deze als een .txt-bestand, of stuur de output terug naar de invoer om het verder aan te passen.