Tutti gli strumenti

CSS Magic

Crea visualmente box-shadow stratificate ed effetti glassmorphism. Copia il CSS pronto all'uso.

Glassmorphism
Anteprima effetto
FAQ

Domande frequenti

Quante box-shadow posso sovrapporre?

CSS permette un numero arbitrario di ombre sovrapposte, separate da virgole. Le ombre vengono renderizzate in ordine: la prima dichiarata è quella più in alto. Ogni livello può avere colore, posizione e sfocatura indipendenti. Questo permette effetti complessi come ombre colorate multiple, ombre interne (con la keyword inset) combinate con ombre esterne, o simulare l'illuminazione da più sorgenti.

backdrop-filter: blur() è supportato da Chrome 76+, Edge 79+, Safari 9+ e Firefox 103+. Per Firefox, è necessario abilitare il flag layout.css.backdrop-filter.enabled. Il prefisso -webkit-backdrop-filter garantisce la compatibilità con Safari versioni più vecchie. Su browser non supportati, l'effetto degrada gracefully: il box rimane semi-trasparente ma senza la sfocatura. Verifica sempre il supporto su caniuse.com prima di usarlo in produzione.

Le ombre interne usano la keyword inset prima degli altri valori: box-shadow: inset 0 2px 4px rgba(0,0,0,0.3). Questo sposta l'ombra all'interno del bordo dell'elemento, creando un effetto incassato o pressato. È utile per simulare pulsanti premuti, campi input con profondità, o contenitori con effetto scavato. Le ombre interne ed esterne possono essere combinate nella stessa dichiarazione.

No. Tutti gli strumenti LYNK TOOLS funzionano interamente nel browser, senza inviare file o dati a server esterni. L'elaborazione avviene localmente sul tuo dispositivo: i tuoi file restano privati e non vengono mai caricati online.