Varför detta verktyg är användbart
Justera en frostad navigeringspanel eller överläggning samtidigt som du behåller en uttrycklig reservlösning och granskar effekten innan den införs i ett produktionsdesignsystem.
Design & CSS · körs lokalt
Tillgänglig CSS Glassmorphism Generator
Skapa en genomskinlig panel med reservfärg, bakgrundsoskärpa, kantlinje, radie- och skuggvärden samtidigt som kontrasten förhandsvisas över en kontrollerad lokal bakgrund.
Klar. Dina arbetsdata finns kvar i den här webbläsaren.
Så fungerar det
Webbläsaren omvandlar en validerad hexfärg till avgränsade alfakanaler, genererar prefixed- och standarddeklarationer för oskärpa och skickar aldrig bort palettval.
Ett praktiskt exempel
Förhandsgranska en mörk marinblå panel med 24 procents opacitet, 18 pixlars oskärpa och en subtil vit kant för en lättläst flytande verktygsrad.
Validering
Beräkningen är deterministisk och förklarar valideringsfel istället för att tyst ändra ogiltig inmatning.
Gräns för sekretess
Inmatning och utmatning sker i den här fliken, medan kopiering och nedladdning sker via webbläsarens API:er utan serveruppladdning.
Resultatpass
Varje körning rapporterar sitt verktygsläge, tidsstämpel och in-/utdatastorlek så att omvandlade data kan granskas.