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.

Scris și verificat de echipa editorială BroBroGo.Ultima actualizare:

Funcționarea generatorului și parametrii de configurare

Acest instrument permite crearea unui gradient CSS prin selectarea tipului acestuia, ajustarea direcției sau a formei și adăugarea a până la opt puncte de oprire a culorii. Pe măsură ce efectuați modificări, interfața afișează o previzualizare live a gradientului și permite copierea codului CSS generat printr-un singur clic.

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

Parametrii de intrare ai instrumentului

Pentru a genera codul CSS, aveți la dispoziție următoarele opțiuni de configurare:

  • Tip de gradient: Puteți alege între opțiunile Liniar, Radial sau Conic.
  • Unghi: O valoare numerică utilizată pentru gradienții liniari sau conici.
  • Formă: Opțiunile Elipsă sau Cerc, specifice pentru gradienții radiali.
  • Puncte de oprire a culorii: Puteți defini până la opt puncte de oprire, fiecare având asociată o culoare și o poziție.
    • Culoare punct de oprire: Valoarea cromatică selectată.
    • Poziție: Un procent cuprins între 0% și 100%.

Elementele de ieșire

  • Previzualizare: O reprezentare vizuală directă a gradientului configurat.
  • CSS: Codul CSS generat automat, gata pentru a fi utilizat în foile de stil.

Fundamentele gradienților CSS

Gradienții CSS sunt imagini generate de browser care realizează o tranziție lină între două sau mai multe culori. Aceștia sunt utilizați pe scară largă în designul web pentru a crea fundaluri dinamice, butoane sau elemente decorative, eliminând necesitatea descărcării unor fișiere de imagine grele.

Tranziția se realizează pe baza unor reguli matematice precise, în funcție de tipul de gradient selectat:

  1. Gradienții liniari: Culorile se îmbină de-a lungul unei linii drepte. Direcția acestei linii este determinată de unghiul setat.
  2. Gradienții radiali: Culorile se extind spre exterior, pornind dintr-un punct central, sub formă de cerc sau elipsă.
  3. Gradienții conici: Culorile sunt distribuite în jurul unui punct central, realizând o mișcare de rotație similară cu cea a unei roți de culori.

Gradienții liniari: direcție și puncte de oprire

Un gradient liniar aliniază culorile de-a lungul unei axe drepte. Direcția acestei axe este controlată prin intermediul glisorului pentru unghi.

Valoarea unghiului determină orientarea exactă a fluxului de culori:

  • La 0°, gradientul este orientat vertical, indicând în sus.
  • La 90°, gradientul este orientat orizontal, indicând spre dreapta.

Fiecare culoare este fixată la o anumită poziție de-a lungul acestei axe. Poziția de 0% reprezintă punctul de pornire (originea gradientului), în timp ce 100% reprezintă punctul final. Prin modificarea acestor procente, se controlează unde anume fiecare culoare atinge intensitatea maximă și cum se realizează zona de amestec dintre ele.

Gradienții radiali: forme și distribuție

Spre deosebire de gradienții liniari, gradienții radiali nu utilizează un unghi pentru orientare. În schimb, culorile se propagă din centru către exterior.

Pentru a controla modul în care se extinde gradientul radial, puteți selecta una dintre cele două forme geometrice disponibile:

  • Elipsă: Culorile se distribuie adaptându-se la proporțiile containerului, generând o formă ovală.
  • Cerc: Culorile se extind în mod egal în toate direcțiile, menținând o formă circulară perfectă, indiferent de raportul de aspect al elementului.

Punctele de oprire controlează distanța față de centru la care culorile își schimbă nuanța, unde 0% reprezintă centrul exact, iar 100% reprezintă marginea exterioară a formei.

Gradienții conici: rotația culorilor

Gradientul conic distribuie culorile prin rotirea lor în jurul unui punct central, în loc să le propage din interior spre exterior sau de-a lungul unei linii. Acest efect este similar cu cel al unei diagrame circulare sau al unei roți de culori.

Unghiul setat pentru gradientul conic determină punctul de pornire al rotației. La fel ca în cazul gradientului liniar, un unghi de 0° începe rotația de sus, iar un unghi de 90° o pornește din partea dreaptă. Pozițiile exprimate în procente (de la 0% la 100%) definesc unghiul de rotație la care fiecare culoare își atinge valoarea pură în cadrul cercului complet de 360°.

Rolul punctelor de oprire în designul gradienților

Punctele de oprire a culorii (color stops) sunt esențiale pentru a defini complexitatea unui gradient. Acestea acționează ca repere pe traseul de tranziție al culorilor.

  • Configurația inițială: Instrumentul pornește implicit cu două puncte de oprire a culorii: #6366f1 la poziția 0% și #ec4899 la poziția 100%. Aceasta oferă o tranziție simplă între două culori.
  • Adăugarea de noi puncte: Puteți adăuga puncte suplimentare pentru a crea amestecuri complexe. Noile puncte de oprire adăugate primesc automat o poziție implicită de 50%.
  • Limita maximă: Instrumentul permite configurarea a maximum opt puncte de oprire. În momentul în care sunt prezente opt puncte de oprire, butonul "Adăugă punct de oprire" este dezactivat.

Utilizarea eficientă a instrumentului

Pentru a genera rapid codul CSS necesar proiectului dumneavoastră, urmați acești pași în interfață:

  1. Selectați tipul: Sub secțiunea "Tip de gradient", alegeți opțiunea dorită: "Liniar", "Radial" sau "Conic".
  2. Ajustați direcția sau forma:
    • Dacă ați ales "Liniar" sau "Conic", folosiți glisorul "Unghi" pentru a orienta gradientul.
    • Dacă ați ales "Radial", selectați una dintre opțiunile din secțiunea "Formă" ("Elipsă" sau "Cerc").
  3. Configurați culorile: În secțiunea "Puncte de oprire a culorii", modificați culorile existente și ajustați glisoarele de "Poziție". Folosiți butonul "Adăugă punct de oprire" dacă aveți nevoie de mai multe nuanțe sau "Elimină punctul de oprire" pentru a reduce numărul lor.
  4. Copiați codul: Previzualizați rezultatul în timp real. Când gradientul arată așa cum vă doriți, mergeți la secțiunea "CSS" și faceți clic pe butonul "Copiază CSS". După apăsare, starea butonului se va schimba în "Copiat", confirmând salvarea codului în clipboard.

Î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.