Generator gradient CSS
Creează un gradient liniar sau radial și copiază codul CSS.
Mulțumim! Ne ajută să facem uneltele mai bune.
Nu s-a putut trimite acum. Încearcă mai târziu.
Generatorul de gradient CSS creează un fundal în degrade, liniar sau radial, din două sau trei culori, și îți dă codul gata de copiat. Alegi culorile cu selectorul, setezi unghiul și vezi rezultatul imediat în previzualizare. Codul funcționează în toate browserele actuale, fără prefixe.
Ce opțiuni ai
- Culoare 1 și 2, plus o a treia culoare opțională, pe care o activezi cu bifa. Culorile sunt distribuite egal pe lungimea gradientului.
- Tip liniar: culorile trec una în alta pe o direcție dată de unghi.
- Tip radial: culorile pornesc din centru spre margini, în cerc. La radial unghiul nu contează.
- Unghi între 0 și 360 de grade.
Cum funcționează unghiul
| Unghi | Direcția trecerii |
|---|---|
| 0deg | de jos în sus |
| 90deg | de la stânga la dreapta |
| 135deg | din colțul stânga-sus spre dreapta-jos |
| 180deg | de sus în jos |
| 270deg | de la dreapta la stânga |
Exemplu de cod
Cu verdele #0f5c4d, galbenul #f4d35e și unghiul de 135 de grade, unealta generează:
background: #0f5c4d; background: linear-gradient(135deg, #0f5c4d, #f4d35e);
Primul rând e o rezervă: dacă un program sau un client de e-mail nu înțelege gradientul, afișează măcar culoarea plină. Cu a treia culoare albă și tipul radial, codul devine radial-gradient(circle, #0f5c4d, #f4d35e, #ffffff).
Sfaturi de design
Gradientele arată bine între culori apropiate pe roata culorilor, de exemplu verde spre turcoaz sau portocaliu spre roz. Două culori opuse, ca roșu și verde, trec printr-o zonă gri-maronie la mijloc. Dacă pui text peste gradient, verifică contrastul la ambele capete cu convertorul de culori, pentru că textul poate fi lizibil pe o margine și ilizibil pe cealaltă. Culori care se potrivesc găsești în generatorul de palete.
Întrebări frecvente
Cum fac un fundal gradient în CSS?
Alege culorile și unghiul, copiază cele două rânduri generate și pune-le în regula CSS a elementului, de exemplu în body sau într-o secțiune.
Ce diferență e între gradient liniar și radial?
Liniarul trece de la o culoare la alta pe o direcție, radialul pornește din centru spre exterior, în cerc.
Pot pune gradient pe text?
Da, dar nu direct cu acest cod. Folosești gradientul ca background, apoi -webkit-background-clip: text și color: transparent pe același element.
De ce gradientul meu are dungi vizibile?
Pe ecrane cu puține culori sau pe suprafețe foarte mari între culori apropiate pot apărea benzi. Adaugă o a treia culoare intermediară sau mărește diferența dintre culori.
Actualizat:
Ce unealtă îți lipsește?
Spune-ne ce calculator sau unealtă ai căutat și n-ai găsit. Citim fiecare sugestie.