IQ
PayloadIQ
Utilitare PayloadIQ

Generator de gradient CSS

Compune un gradient liniar sau radial cu previzualizare live — alegi culorile, pozițiile și unghiul, apoi copiezi codul CSS. Totul rulează în browserul tău.

#e0327f0%
#6d34d6100%
background: linear-gradient(90deg, #e0327f 0%, #6d34d6 100%);

Rulează în browserul tău. Ce introduci nu este încărcat pe PayloadIQ.

Acest instrument generează un gradient CSS direct în browserul tău: alegi culorile, pozițiile lor, tipul (liniar sau radial) și unghiul, iar previzualizarea se actualizează în timp real. Rezultatul este o declarație background completă, gata de lipit în foaia ta de stil. Nimic nu se trimite către vreun server — totul se calculează local, pe dispozitivul tău.

Compune-l, vezi-l, copiază-l

Adaugă câte puncte de culoare vrei, glisează fiecare la locul lui de-a lungul benzii și comută între gradient liniar și radial ca să compari. Un gradient liniar amestecă culorile pe o linie dreaptă, în funcție de unghiul pe care îl setezi, în timp ce unul radial le difuzează dinspre centru spre exterior. Previzualizarea se schimbă la fiecare ajustare, așa că reglezi rezultatul din ochi, fără să ghicești valorile, și primești o declarație background curată, fără prefixe inutile, gata de lipit în CSS.

Totul rămâne în browser

Gradientul este calculat și afișat local: nicio culoare și niciun fragment de cod nu părăsește dispozitivul tău și nimic nu ajunge la PayloadIQ. E util zi de zi — pentru a stiliza un buton, un fundal de secțiune sau antetul unui card — fără să depinzi de o conexiune sau de un serviciu extern. Copiezi rezultatul dintr-un clic, îl lipești în foaia de stil sau într-un atribut style inline și ai terminat. Fără cont, fără reclame.

Întrebări frecvente

Cum adaug mai multe culori?
Apasă pe „Adaugă punct de culoare”, apoi setează culoarea și poziția fiecărui punct de-a lungul gradientului. Glisoarele de poziție îți dau control exact asupra locului unde se așază fiecare culoare.
Care e diferența dintre liniar și radial?
Un gradient liniar amestecă culorile pe o linie dreaptă, la unghiul pe care îl alegi. Un gradient radial le răspândește dinspre centru spre exterior, în cerc. Schimbă tipul ca să vezi pe loc diferența dintre cele două.
Codul copiat e direct utilizabil?
Da. Rezultatul este o declarație background completă, pe care o lipești ca atare într-o foaie de stil sau într-un atribut style inline, fără să mai modifici nimic.
Culorile sau codul meu se trimit undeva?
Nu. Tot randarea gradientului se face în browserul tău, local pe dispozitiv. Nimic nu se încarcă și nu se trimite către PayloadIQ sau alt server.

Utilitare similare

Generator de UUIDGenerator de string-uri aleatoriiGenerator de hashHash fișier / Checksum
Deschide PayloadIQ Playground