Un degrade frumos, fără să scrii o linie de cod de mână. Gradientele CSS dau profunzime și viață unei interfețe, dar sintaxa lor este ușor de uitat. Acest generator îți arată rezultatul live în timp ce tragi de glisoare și îți oferă codul CSS gata de copiat – totul în browserul tău, fără server.
Ce este un gradient CSS
Un gradient CSS este o tranziție continuă între două sau mai multe culori. Spre deosebire de o imagine, gradientul este generat de cod, deci:
- rămâne clar la orice rezoluție, fără pixelare;
- nu adaugă un fișier imagine separat de încărcat;
- se poate modifica instant schimbând o valoare în CSS.
Browserul îl tratează ca pe o imagine de fundal, dar îl desenează matematic.
Liniar vs radial
Cele două tipuri de bază diferă prin forma tranziției:
| Tip | Direcție | Funcție CSS |
|---|---|---|
| Liniar | De-a lungul unei linii drepte, după un unghi | linear-gradient() |
| Radial | Dintr-un punct central spre exterior | radial-gradient() |
Gradientul liniar este cel mai folosit pentru fundaluri de secțiuni și butoane. Cel radial creează un efect de reflector sau de strălucire, potrivit pentru accente și centre de atenție.
Punctele de culoare și pozițiile
Un gradient poate avea oricâte puncte de culoare (color stops). Fiecare punct are:
- o culoare;
- o poziție între 0% și 100%, locul unde acea culoare se manifestă complet.
Între două puncte, browserul amestecă continuu culorile vecine. Cu cât pui mai multe puncte, cu atât poți controla mai fin tranziția – dar de multe ori două sau trei culori bine alese dau cel mai elegant rezultat.
Unghiul: direcția gradientului liniar
La gradientul liniar, unghiul stabilește direcția. CSS îl măsoară pornind de la ora 12, în sensul acelor de ceasornic:
- 0° – de jos în sus
- 90° – de la stânga la dreapta
- 180° – de sus în jos
- 270° – de la dreapta la stânga
Unghiul de 135° (diagonală, din stânga-sus spre dreapta-jos) este una dintre cele mai populare și echilibrate direcții.
Sintaxa CSS
Codul generat arată astfel pentru un gradient liniar cu două culori:
background: linear-gradient(135deg, #3B82F6 0%, #F43F5E 100%);Și astfel pentru unul radial:
background: radial-gradient(circle, #3B82F6 0%, #F43F5E 100%);Poți adăuga oricâte puncte, separate prin virgulă, fiecare cu culoarea și poziția lui.
Unde se folosesc gradientele
- Fundaluri de secțiuni hero – un degrade subtil dă adâncime fără a distrage de la conținut.
- Butoane și elemente CTA – un gradient atrage privirea spre acțiunea principală.
- Carduri și panouri – pentru a le diferenția de fundalul paginii.
- Glassmorphism și UI modern – gradientele sunt un ingredient esențial al esteticii actuale.
Sfaturi practice
- Două nuanțe apropiate (o versiune mai deschisă și una mai întunecată a aceleiași culori) dau un degrade fin și profesionist.
- Pentru text peste un gradient, verifică contrastul în zona cea mai deschisă și cea mai întunecată.
- Adaugă o culoare de fundal de rezervă înainte de gradient, pentru browsere foarte vechi.
- Nu exagera cu numărul de culori – prea multe puncte fac rezultatul aglomerat și greu de controlat.
Confidențialitate: totul rămâne local
Generarea rulează în browserul tău, prin JavaScript. Nimic nu este trimis sau salvat pe vreun server – obții doar codul CSS, pe care îl copiezi când ești mulțumit de rezultat.
Instrumente înrudite
- Convertor de Culori — HEX, RGB, HSL, HSV și CMYK în timp real
- Verificator de Contrast WCAG — verifică lizibilitatea textului pe fundal
- Convertor Baze Numerice — binar, octal, zecimal și hexazecimal