Generátor CSS gradientov – lineárne a radiálne
Generátor CSS gradientov vytvára CSS gradient pozadia z dvoch farieb. Vyberte lineárny gradient a nastavte jeho uhol, alebo zvoľte radiálny gradient a potom pri úprave volieb skontrolujte živý náhľad. Skopírujte výslednú deklaráciu CSS a vložte ju do štýlového súboru. Je to rýchly spôsob, ako vytvoriť štýly gradientov bez ručného písania hodnoty.
Generátor CSS gradientov je prehliadačový nástroj na vytváranie CSS gradientov z dvoch farieb. Vyberte lineárny gradient s uhlom alebo zvoľte radiálny gradient, skontrolujte živý náhľad a skopírujte výslednú deklaráciu pozadia do štýlového súboru. Poskytuje jednoduchý spôsob, ako vytvoriť CSS gradienty bez ručného písania hodnoty.
Pracovný postup je jednoduchý: nastavte farby a typ gradientu a potom pri použití lineárneho gradientu upravte uhol. Náhľad sa aktualizuje, aby zobrazoval vybraný gradient, a nástroj poskytne výslednú deklaráciu CSS na skopírovanie. Lineárne a radiálne gradienty ponúkajú rôzne spôsoby prechodu medzi farbami: lineárny gradient sleduje smer, zatiaľ čo radiálny gradient sa šíri smerom von z centrálnej oblasti.
Vygenerovaný CSS gradient použite, keď chcete v štýlovom súbore prechod farieb namiesto statickej hodnoty farby alebo ručne skladanej deklarácie. Lineárna možnosť je užitočná, keď záleží na smere; radiálna možnosť poskytuje pre prechod iný tvar. Vygenerované hodnoty môžete použiť aj v testoch, fixture, počiatočných údajoch alebo prototypoch.
Generátor CSS gradientov funguje úplne vo vašom prehliadači. Žiadny vstup sa nenahráva, neukladá ani neodosiela na server a po načítaní stránky nástroj funguje offline. Je zadarmo a pomáha vývojárom a DevOps inžinierom, ktorí chcú rýchlo vytvoriť, skontrolovať a skopírovať CSS gradientov.
Krok 1: Vyberte dve farby pre gradient. Tieto farby sa použijú na vytvorenie hodnoty pozadia CSS.
Krok 2: Vyberte lineárny alebo radiálny gradient. Ak zvolíte lineárny, nastavte uhol na ovládanie jeho smeru.
Krok 3: Pri úprave volieb skontrolujte živý náhľad. Ukazuje, ako gradient vyzerá, než skopírujete CSS.
Krok 4: Skopírujte výslednú deklaráciu pozadia CSS a vložte ju do štýlového súboru.
Prípad použitia: Vytvorte hodnoty CSS gradientov pre testy, fixture alebo počiatočné dáta, aby príklady používali štýly pripravené na vloženie.
Prípad použitia: Vygenerujte viacero hodnôt gradientov naraz namiesto vymýšľania každej hodnoty ručne.
Prípad použitia: Získajte správne náhodné hodnoty gradientov namiesto spoliehania sa na odhady písané na klávesnici.
Prípad použitia: Vyskúšajte lineárne a radiálne úpravy rozhrania pred pridaním vybraného CSS do štýlového súboru.
Prípad použitia: Pripravte štýl gradientu pre prototyp výberom dvoch farieb a kontrolou živého náhľadu.
Prípad použitia: Skopírujte deklaráciu gradientu na použitie v projekte bez ručného skladania hodnoty CSS.