Handytool
Pentru dezvoltatoriGratuitRulează local

Generator Gradient CSS

Construiește și exportează gradient-uri lineare și radiale cu stope de culoare personalizate.

Previzualizare
CSS
background: linear-gradient(135deg, #B7FF3E 0%, #0a0a0a 100%);
Tip
Presetări

Adăugați până la șase opriri de culoare, trageți glisorul poziției și copiați CSS.

Despre Generator Gradient CSS

Generatorul gradient al Handytool-ului te permite să combini culori în gradient-uri lineare, radiale și conice. Adaugă și editează stope de culoare, reglează unghiul și poziția, și previzualizează instantaneu pe un element de dimensiune variabilă. Exportează proprietatea CSS completă, gata pentru producție, cu suport pentru cuvinte-cheie de direcție (to right, to bottom) și unghiuri de grad.

Generator Gradient CSS – funcționalități

  • 01

    Stope de culoare libere

    Adaugă cât mai multe culori vrei și reglează poziția fiecăreia cu un slider. Genereaza automat o distribuție liniară dacă nu specifici altfel.

  • 02

    Tipuri de gradient: liniar, radial, conic

    Comută între linear (o direcție), radial (dintr-un punct central) și conic (o rotație în jurul unui punct) pentru toate efectele pe care le poți imagina.

  • 03

    Previzualizare pe element real

    Vezi gradient-ul pe un pătrat (sau alt aspect ratio) cu orice fundal secundar pentru a testa contrastul și lizibilitatea.

Generator Gradient CSS – întrebări frecvente

Care sunt cuvintele-cheie de direcție?
Folosește to right, to bottom, to bottom right etc. pentru gradient-uri lineare. Unghiurile în grad (45deg) funcționează de asemenea.
Cum poziționez stoperile?
Fiecare stoperă are o poziție (0% - 100%). 0% este startul, 100% este sfârșitul. Interpolarea automată umple spațiile între.
Gradient radial - ce face position?
Poziția (center, top, etc.) setează unde incepe radiația. Forma (cerc vs elipsă) și dimensiunea controlează cum se răspândește gradient-ul.
Pot folosi variabile CSS?
Da. Copiază CSS generat și înlocuiește culorile cu var(--culoare-mea) pentru componente reutilizabile cu temă.

Instrumente similare

Pentru dezvoltatori →

Explorează alte instrumente

Toate instrumentele →