Generator Box Shadow

Trageți de glisoare pentru a crea o umbră de tip box-shadow, suprapuneți straturi pentru profunzime și copiați instantaneu codul CSS rezultat.

Straturi de umbră
Strat 1
CSS
Ajustați glisoarele pentru a modela umbra.

Fiecare umbră este randată direct în browserul dumneavoastră. Nimic din ceea ce setați aici nu este încărcat pe BroBroGo.

Întrebări frecvente

Ce controlează, de fapt, offset-ul, blur-ul și spread-ul?

Deplasarea (offset) mută umbra la stânga/dreapta și sus/jos, estomparea (blur) îi atenuează marginile, iar extinderea (spread) o mărește sau o micșorează înainte de estompare. O valoare negativă pentru spread trage umbra spre interior, fiind utilă pentru o umbră strânsă, de profunzime.

Ce face opțiunea inset?

O umbră normală apare în exteriorul elementului, ca lumina din spatele unui card suspendat. Opțiunea „Inset” o mută în interior, astfel încât elementul pare adâncit în pagină — util pentru câmpuri de introducere sau butoane apăsate.

De ce să suprapunem mai multe straturi de umbră?

O singură umbră tinde să pară plată dincolo de o anumită dimensiune. Efectul realist de elevare combină de obicei o umbră strânsă și întunecată cu una mai fină și mai extinsă — adăugați un al doilea strat și ajustați-le independent pentru a obține acest efect.

Generator CSS Cubic BezierTrageți de cele două mânere pentru a modela o curbă de atenuare, urmăriți mișcarea unui punct comparativ cu una constantă și copiați valoarea cubic-bezier().Generator de gradiențiCreați un gradient liniar, radial sau conic, adăugați puncte de oprire a culorii, setați direcția și copiați codul CSS rezultat printr-un singur clic.Generator Border RadiusRotunjiți fiecare colț cu ajutorul glisoarelor, creați forme organice cu modul eliptic și copiați instantaneu codul CSS.Generator FlexboxConfigurați un container flex și elementele sale cu ajutorul controalelor vizuale, urmăriți modificările în timp real și copiați codul CSS printr-un singur clic.Generator CSS GridDefiniți coloanele și rândurile, selectați celulele pentru a plasa elementele și copiați codul CSS împreună cu cel HTML corespunzător printr-un singur clic.Calculator CSS clamp()Introduceți dimensiunile pentru ecrane mici și mari și obțineți o valoare fluidă clamp() care se scalează armonios între ele — ideală pentru dimensiuni de font, padding, margini sau spațieri.Convertor de culoriConvertiți culori între HEX, RGB, HSL, HSV, CMYK și LAB — editați orice câmp și restul se vor actualiza pe parcurs.Înfrumusețare și minificare CSSReindentați codul CSS dezordonat pentru a-l citi mai ușor sau minificați-l pentru publicare — cu un mod sigur care nu reordonează niciodată regulile.Verificator de contrastIntroduceți culoarea textului și a fundalului pentru a vedea raportul de contrast WCAG și nivelurile AA și AAA admise.