Compune o proprietate CSS box-shadow

Cu Generator de umbre, designerii și dezvoltatorii front-end pot să ajusteze o interfață înainte de implementare. Compune o proprietate CSS box-shadow.

Compune o proprietate CSS box-shadow. Instrumentul este gratuit în browser și afișează rezultatul fără să solicite un cont.

Cum se folosește

Introduceți decalajul orizontal și vertical al umbrei, apoi valorile de estompare și extindere.
Furnizați culoarea în format hexazecimal, folosind șase cifre precedate de semnul diez.
Apăsați butonul de generare pentru a obține proprietatea box-shadow completă.
Copiați regula produsă și lipiți-o în foaia de stil pentru a o aplica.
Ajustați valorile dacă afișarea nu corespunde efectului dorit.

Exemplu

Datele de intrare exemplu descriu o umbră deplasată cu estompare și o culoare închisă. După generare, rezultatul afișează proprietatea box-shadow corespunzătoare. Puteți modifica câte o valoare pe rând pentru a vedea cum influențează fiecare setare umbra.

Date de intrare

Rezultat

box-shadow: 2px 2px 8px 1px #000000;

Limite și formate

Instrumentul nu previzualizează umbra pe un element; oferă doar codul CSS.
Valorile de decalaj, estompare și extindere trebuie să fie numerice, iar decalajele pot fi negative.
Culoarea trebuie să fie hexazecimală validă; o culoare incorectă împiedică generarea.
Afișarea finală depinde de browser și de contextul elementului.

Unde are loc procesarea

Totul se întâmplă în browser. Setările introduse rămân pe dispozitivul dvs. și nu sunt încărcate sau stocate. Proprietatea CSS este asamblată local, fără conexiune externă.

Întrebări frecvente

Ce unități ar trebui să folosesc pentru decalaje și estompare?

Valorile sunt de obicei fără unitate pentru decalaje și estompare, deoarece reprezintă pixeli. Puteți adăuga și o unitate precum px sau rem. Păstrați aceeași logică pentru toate valorile.

Pot folosi o culoare transparentă?

Câmpul așteaptă o culoare hexazecimală. Pentru o umbră transparentă, puteți folosi o culoare cu canal alfa dacă formatul permite, dar cea mai simplă abordare este să alegeți o culoare solidă și să ajustați opacitatea în CSS.

De ce umbra mea nu este vizibilă?

Verificați că proprietatea este aplicată unui element cu dimensiune vizibilă. O valoare prea mică pentru estompare sau extindere poate face umbra invizibilă. De asemenea, asigurați-vă că culoarea nu este identică cu fundalul.