Instrumente pentru culori

Generator de gradient CSS: liniar, radial și conic – Gratuit

Gratuit, fără înregistrare, funcționează în browser. Creează un gradient liniar, radial sau conic cu 2 până la 8 culori, vezi-l live și copiază codul CSS. Descarcă și ca imagine PNG.

Opriri de culoare

  • 0%
  • 100%

CSS

background: #ff7ac6;
background: linear-gradient(135deg, #ff7ac6 0%, #ffe14d 100%);

Primul rând este o culoare plină pentru dispozitivele foarte vechi care nu pot afișa gradiente.

Pornește de la un predefinit

Creat pe dispozitivul tău.

De ce să folosești Generator de gradient CSS

100% gratuit
Folosește-l oricât de des vrei. Fără înregistrare, fără filigran, nimic de instalat.
Privat prin design
Ce scrii rămâne în browser și nu ne este trimis niciodată.
Funcționează pe orice dispozitiv
Rulează în browser pe Windows, Mac, Linux, Android și iPhone. Nu e nevoie de aplicație.

Cum să folosești Generator de gradient CSS

  1. Alege Tipul: Liniar, Radial sau Conic. Setează direcția cu cursorul sau alege Cerc ori Elipsă pentru un gradient radial.
  2. La Opriri de culoare, alege fiecare culoare sau scrie un cod și trage cursorul ca să-i setezi poziția. Folosește Adaugă o oprire pentru mai multe culori, până la 8, și Inversează ca să schimbi ordinea.
  3. Sau apasă unul dintre presetările de la Începe dintr-o presetare și modifică-l de acolo.
  4. Apasă Copiază CSS și lipește-l în foaia ta de stiluri, sau alege o Dimensiune a imaginii și apasă Descarcă PNG.

Întrebări frecvente

Cum folosesc CSS-ul?

Lipește ambele linii în regula elementului pe care vrei să-l colorezi, precum body sau un buton. Prima linie este o culoare solidă de rezervă; a doua este gradientul.

Care este diferența dintre liniar, radial și conic?

Liniarul se amestecă de-a lungul unei linii drepte, radialul pornește din centru într-un cerc sau o elipsă, iar conicul se învârte în jurul centrului ca o roată de culori sau o diagramă circulară.

Cum schimb direcția unui gradient liniar?

Trage cursorul Direcție de la 0° la 360°. 0° merge de jos în sus, 90° de la stânga la dreapta, 180° de sus în jos, iar 135° merge diagonal spre dreapta jos.

Câte culori poate avea un gradient?

De la 2 la 8 opriri de culoare. Fiecare oprire are o poziție de la 0% la 100%; pune două opriri în aceeași poziție pentru o linie tare între culori, în loc de o trecere treptată.

Pot folosi transparență?

Da. Scrie o culoare precum rgba(47, 91, 255, 0.5) sau un cod HEX de 8 cifre într-o oprire, iar gradientul se estompează și devine transparent acolo.

Pot descărca gradientul ca imagine?

Da. Alege 1920 × 1080, 3840 × 2160, 1080 × 1080, 1080 × 1920 sau 1500 × 500 și apasă Descarcă PNG, pentru un fundal de ecran, o prezentare, o postare sau un antet.

Funcționează CSS-ul cu Tailwind, React sau WordPress?

Da. Codul este CSS simplu, deci pune-l într-o clasă în foaia ta de stiluri (sau într-o casetă CSS personalizată) și adaugă clasa elementului. Funcționează în toate browserele moderne.

Se încarcă ceva?

Nu. Gradientele sunt create pe dispozitivul tău.

Este Generator de gradient CSS gratuit?

Da. Se folosește gratuit, fără înregistrare și fără nimic de instalat.

Ghiduri de ajutor și tutoriale (în engleză)

Unelte similare