Generator de gradienți

Creaț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.

Tip de gradient
Puncte de oprire a culorii
CSS
Ajustați punctele de oprire și direcția pentru a modela gradientul.

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

Întrebări frecvente

Care este diferența dintre gradienții liniari, radiali și conici?

Un gradient liniar îmbină culorile de-a lungul unei linii drepte pe care o orientați cu ajutorul unui unghi. Un gradient radial le extinde spre exterior din centru, sub formă de cerc sau elipsă. Un gradient conic le distribuie în jurul centrului, similar unei roți de culori.

Ce sunt punctele de oprire a culorii (color stops)?

Fiecare punct de oprire reprezintă o culoare fixată la o anumită poziție de-a lungul gradientului — 0% la început, 100% la sfârșit. Mutați un punct de oprire pentru a schimba zona în care culoarea respectivă atinge intensitatea maximă sau adăugați mai multe puncte pentru un amestec mai bogat. Puteți folosi până la opt puncte.

Cum controlez direcția?

Pentru gradienții liniari sau conici, glisorul pentru unghi setează direcția — 0° indică în sus, 90° indică spre dreapta. Un gradient radial nu are unghi; alegeți în schimb o formă de cerc sau elipsă pentru a modifica modul în care se extinde.

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 Box ShadowTrageți de glisoare pentru a crea o umbră de tip box-shadow, suprapuneți straturi pentru profunzime și copiați instantaneu codul CSS rezultat.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.