Glasmorfism CSS-generator
Generera CSS för frostade glaspaneler eller mjuka neumorfiska ytor med bara några skjutreglage – ingen kodning krävs.
Glasmorfism CSS-generator
Skapa en komplett, redo-att-klistra-in CSS-regel för en frostad glaspanel eller en mjuk neumorfisk yta utan att skriva något värden för hand. Välj glasmorfism för ett halvgenomskinligt kort som suddar allt bakom det – utseendet som används på moderna instrumentpaneler, inloggningssidor och modaler – eller neumorfism för en yta som verkar vara formad av samma material som dess bakgrund, med hjälp av ett par motsatta mjuka skuggor istället för transparens.
Alternativen mappas direkt till egenskaperna som verktyget skriver. I glaspanelläge styr ytgenomskinligheten och skärpedjupet bakgrunds-alfa och bakgrundsfilter blur, medan kanttjockleken och kanttydligheten ställer in en tunn, halv-transparent kant som håller panelen läsbar mot upptagna bakgrunder. Skuggutsträckningen och skuggmjukheten formar droppskadugan under panelen, och formknappen växlar den till en inskriven skugga för ett försänkt utseende. I neumorfism-läge driver samma skuggutsträcknings- och skuggmjukhetsvärdena en ljus och mörk skugga beräknad från din ytfärg, upphöjd eller intryck beroende på vilken form du väljer. Hörnradien och en mörkt läge variant gäller för båda stilarna.
Eftersom en frostad eller mjukt skuggad yta kan hamna i en mittton som är svår att läsa med antingen svart eller vit text, kontrollerar verktyget den resulterande konturasten och lägger till en kort varningskommentar ovanför CSS när ingen av textfärgerna skulle passa bekvämt ovanför WCAG AA – en påminnelse om att justera ytfärgen eller opaciteten snarare än en gissning.
Allt körs lokalt i din webbläsare när du flyttar skjutreglaget – inget designverktyg, inget konto och ingenting som skickas till en server. Kopiera CSS direkt till din formatmall, ladda ned den som en .txt-fil, eller skicka utdata tillbaka till inmatningen för att fortsätta justera det.