Generi un valore box-shadow CSS

Crei un valore box-shadow CSS pronto da copiare partendo da cinque input espliciti, senza comporre manualmente la sintassi. Indichi gli scostamenti orizzontale e verticale, il raggio di sfocatura, il raggio di espansione e qualsiasi colore supportato da CSS. Il generatore convalida i campi numerici, rifiuta valori negativi per sfocatura o espansione e restituisce un’ombra formattata in modo coerente con unità in pixel. È utile per la progettazione interattiva, le pipeline di token di design, i generatori di componenti e i test che devono ottenere sempre lo stesso risultato dallo stesso input.

Imposti la posizione con gli scostamenti orizzontale e verticale

Nel risultato generato entrambi i valori sono espressi in pixel CSS. Uno scostamento orizzontale positivo sposta l’ombra verso destra, mentre uno negativo la porta verso sinistra. Uno scostamento verticale positivo la muove verso il basso e uno negativo verso l’alto.

Il valore zero mantiene l’ombra centrata sull’asse corrispondente. I campi accettano numeri decimali quando un sistema di design usa spaziature frazionarie; il generatore conserva il numero convalidato senza arrotondarlo silenziosamente. Nel scegliere gli scostamenti consideri la sorgente luminosa apparente: una luce posta in alto a sinistra produce normalmente un’ombra in basso a destra.

Valori piccoli tendono a comunicare vicinanza e discrezione, mentre valori grandi possono far apparire un elemento sollevato o volutamente grafico. Lo strumento non deduce la direzione dalla sfocatura, dal colore o dal tipo di componente. I valori restano quindi sotto il Suo controllo e possono essere riprodotti con precisione nei fogli di stile e nelle build.

Regoli morbidezza e ingombro con sfocatura ed espansione

Il raggio di sfocatura controlla quanto gradualmente l’ombra passa dalla zona più intensa alla trasparenza. Un valore pari a zero crea un bordo netto, mentre valori maggiori producono un’ombra più morbida e visivamente più ampia. Il raggio di espansione ingrandisce la forma dell’ombra prima che venga applicata la sfocatura.

Zero segue l’ingombro originale dell’elemento; un valore positivo lo estende in ogni direzione. Inserisca ciascun valore come numero semplice; il CSS restituito aggiunge le unità px nell’ordine richiesto. Sfocatura ed espansione sono controlli diversi, quindi aumentare l’una non equivale ad aumentare l’altra.

Per un’ombra discreta da interfaccia, abbini uno scostamento contenuto a una sfocatura moderata e a poca o nessuna espansione. Per un anello di focus deciso o un effetto da manifesto, sfocatura zero ed espansione più ampia possono creare un contorno nitido. Visualizzi il risultato sulla superficie reale, perché contrasto e colori circostanti cambiano la morbidezza percepita.

Scelga un colore e applichi il valore generato

Il campo del colore accetta un solo valore CSS non vuoto, compresi un nome, una notazione esadecimale o una forma funzionale come rgb() o hsl(). La trasparenza alfa è spesso importante per ombre naturali, perché un colore scuro opaco può risultare pesante sulle superfici chiare e torbido sugli sfondi colorati. Il generatore elimina gli spazi esterni superflui, verifica che le parentesi siano bilanciate e rifiuta caratteri che potrebbero interrompere una dichiarazione.

Assegni il valore alla proprietà box-shadow, lo inserisca in una proprietà personalizzata o lo salvi come token di design. La risposta è un valore, non una dichiarazione completa; l’applicazione sceglie ancora il selettore e decide se combinarlo con altri livelli. Per ombre multiple, generi e controlli ogni livello separatamente prima di unire i valori con virgole.

L’esecuzione è deterministica e non dipende da rete, modello, casualità, archiviazione o orologio: risulta quindi adatta a snapshot e automazioni di build ripetibili.