border-radius: 24px;
background: #e0e0e0;
box-shadow: 12px 12px 24px #bababa, -12px -12px 24px #ffffff;Il generatore di neumorfismi CSS costruisce elementi di soft ui, lo stile in cui una forma appare delicatamente estrusa o premuta sullo sfondo utilizzando ombre chiare e scure accoppiate. Impostare il colore della superficie, la distanza dell'ombra, la sfocatura, l'intensità del contrasto, il raggio dell'angolo e la forma, guardare un'anteprima dal vivo e copiare il CSS esatto.
Il neumorfismo funziona posizionando due ombre a scatola su un elemento che condivide il suo sfondo con la pagina: un'ombra più chiara in alto a sinistra e una più scura in basso a destra. Ottenere i due colori e offset delle ombre per sembrare convincentemente morbidi è schizzinoso a mano. Questo strumento deriva automaticamente le tonalità chiare e scure dal colore della tua superficie, quindi l'effetto sembra sempre equilibrato.
Tutto funziona nel tuo browser. Scegli un preset, regola i cursori, passa tra forme piatte, concave, convesse e premute e copia il CSS. Nessun account, nessun caricamento e continua a funzionare offline una volta caricata la pagina.
Scegli il colore del tuo elemento, che dovrebbe corrispondere allo sfondo della pagina dietro di esso: il neumorfismo si basa sull'elemento e sulla pagina che condivide lo stesso colore di base.
Regola la distanza, la sfocatura e l'intensità per controllare la distanza dell'elemento dalla pagina e la forza del contrasto chiaro/scuro.
Passa da piatto, concavo, convesso e pressato. Pressed utilizza le ombre del riquadro per sembrare infossate, mentre concavo e convesso aggiungono un sottile gradiente.
Copia il blocco generato - raggio-bordo, sfondo e ombreggiatura a scatola - e incollalo sulla tua carta, pulsante o pannello.
Le tonalità chiare e scure delle ombre derivano dal colore della tua superficie, quindi l'effetto soft-ui sembra sempre equilibrato senza modifiche manuali
Copertura piatta, concava, convessa e pressata alzata e sguardi incavati, con pressato che utilizza ombre inserte e concavo/convesso che aggiunge un sottile gradiente
I cursori per distanza dell'ombra, sfocatura, intensità del contrasto e raggio d'angolo consentono di comporre l'effetto da a malapena a drammatico
L'anteprima si trova su uno sfondo corrispondente in modo che le ombre morbide leggano correttamente, aggiornandosi istantaneamente durante la modifica
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 frosted-glass UI with a live preview and sliders for backdrop blur, transparency, saturation, color, and radius — then copy production-ready CSS.
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!