Generator de degradeuri CSS

Toate instrumentele

Creează degradeuri CSS liniare, radiale și conice cu mai multe puncte de culoare și copiază codul.

Previzualizare
Cod CSS
background: —;

Totul rulează în browserul tău — fără încărcare, fără înregistrare.

Tip de degradeu
deg
Puncte de culoare Apasă pe bară pentru a adăuga un punct, trage pentru a-l muta
Punct selectat
Culoarea punctului
100%
%
Presetări

Despre Generator de degradeuri CSS

CSS Gradient Generator construiește gradienturi liniare, radiale și conice cu control vizual complet. Adaugă opriri de culoare dând click pe bara gradientului, trage-le pentru a le repoziționa și dă fiecărei opriri propria culoare, opacitate și poziție. Gradienturile liniare primesc un control de unghi; cele radiale, o formă (cerc sau elipsă) și o poziție; cele conice, un unghi de start.

Previzualizarea live arată exact ce va randa browserul, iar un buton de randomizare plus un set de presetări selectate sunt la îndemână atunci când ai nevoie de un punct de plecare în loc de o pagină goală. Opririle pot fi adăugate și eliminate liber — un gradient are nevoie de cel puțin două.

Când arată bine, copiază fie valoarea simplă a gradientului, fie o regulă CSS completă. Generatorul rulează în întregime în browserul tău, fără încărcare și fără înregistrare, ceea ce îl face un partener rapid pentru butoane, fundaluri hero, margini și efecte de text.

Cum să utilizați Generator de degradeuri CSS

  1. Alege tipul de gradient: liniar, radial sau conic.
  2. Setează unghiul (liniar), forma și poziția (radial) sau unghiul de start (conic).
  3. Dă click pe bara gradientului pentru a adăuga opriri de culoare și trage-le în poziție.
  4. Dă fiecărei opriri culoarea, opacitatea și poziția exactă.
  5. Încearcă presetările sau butonul de randomizare pentru inspirație rapidă.
  6. Copiază valoarea gradientului sau regula CSS completă.

Întrebări frecvente

Gradienturile liniare amestecă culori de-a lungul unei linii drepte, la un unghi dat. Cele radiale radiază spre exterior dintr-un punct central, sub formă de cerc sau elipsă. Cele conice rotesc culorile în jurul unui punct central — tipul din spatele graficelor circulare și al roților de culori.

Cel puțin două, fără o limită superioară practică. Două sau trei opriri creează fundaluri curate; opririle apropiate creează benzi dure de culoare, așa se construiesc efectele de dungi și segmentare.

Da — fiecare oprire are propriul control de opacitate. O oprire la 0% opacitate estompează gradientul, ceea ce este modul standard de a integra un overlay colorat peste o fotografie sau de a estompa o secțiune hero în fundalul paginii.

Nu direct — browserele nu pot face tranziții între valorile de gradient. Trucurile obișnuite: animarea background-position peste un gradient supradimensionat, rotirea unui gradient conic cu o proprietate personalizată sau cross-fade între două elemente suprapuse.

Da, gratuit și nelimitat. Rulează complet în browserul tău, așa că nimic din ce proiectezi nu este stocat sau transmis.
Distribuiți
Instrumente conexe
Constructor de semnătură e-mail Proiectează o semnătură HTML profesională de e-mail din 30 de șabloane, personalizez și salveaz-o. Gratuit
Icoană în PNG Convertește Bootstrap Icons, Font Awesome și altele în imagini PNG personalizate — gratuit, în browserul tău. Gratuit
Generator de icoane pentru aplicații Generează un set complet de icoane pentru App Store și Google Play — fundaluri premium cu gradient, mesh și model, construit din logo-ul tău. Gratuit
Generator de favicon Construiește un pachet complet de favicon-uri dintr-un logo, o icoană de tip font sau un monogram — favicon.ico, PNG-uri moderne, icoana Apple touch, icoane PWA, un manifest web și fragmentul HTML. Gratuit
Generator CSS Box Shadow Creează umbre CSS stratificate cu glisoare live pentru offset, estompare, extindere, culoare, opacitate și inset — previzualizează pe un element real și copiază CSS-ul gata de lipit instant. Gratuit
Generator CSS Border Radius Creează vizual border-radius CSS cu previzualizare în timp real și copiază cod gata de producție. Gratuit
Căutări populare
generator degradeu css generator degradeu liniar css degradeu radial css degradeu conic css creator fundal degradeu css instrument puncte de culoare degradeu selector unghi degradeu css generator degradeu online
Ai nevoie de ajutor?
Ai întâmpinat o problemă cu acest instrument? Spune-ne.
Raportează o problemă

Adăugați acest instrument gratuit pe propriul site — copiați și lipiți codul de mai jos.