Generátor CSS gradientov
Generujte CSS gradient kód stlačením voľby farby a uhla s náhľadom
Vlastnosti
Náhľad a kód sa aktualizujú súčasne
Vzhľad a CSS sa menia zároveň, keď meníte farby alebo uhol
Podpora lineárnych, radiálnych a kónických gradientov
Presne zadajte uhol, tvar a strednú polohu pre každý typ
Úprava až 10 farieb ťahaním
Úpravte polohu farby ťahaním na paneli, priehľadnosť nastavte posuvníkom
8 vzoriek a náhodné generovanie
Začnite s obľúbenými alebo náhodnými farebnými kombináciami a jemne ich upravte
Ako používať
Vyberte typ
Vyberte typ gradientu: lineárny, radiálny alebo kónický
Zvoľte farby
Vyberte farbu pomocou kódu alebo vzorky, pridajte farby tlačidlom "Pridať farbu" a upravte ich polohu a priehľadnosť
Upravte smer
Pri lineárnom gradiente nastavte uhol alebo smer, pri radiálnom a kónickom zadajte strednú polohu
Skopírujte kód
Kliknutím na tlačidlo "Kopírovať" skopírujte CSS do svojho štýlu
Príklady použitia
Vytvorenie pozadia hero obrázka
Nastavte pozadie hornej časti webu alebo tlačidiel bez písania kódu
Výber farieb pre nadpisy blogov
Zvoľte podobnú farebnú kombináciu z vzoriek a upravte pozadie nadpisu článku
Prekrytie na fotografie
Vytvorte polopriesvitnú vrstvu nad fotkou zníženou priehľadnosťou
Úprava viacfarebných gradientov
Ťahaním upravte polohu hraníc medzi 3 alebo viacerými farbami
Základné vedomosti
Rozdiel medzi linear, radial a conic
CSS gradienty majú 3 funkcie s rôznym spôsobom zmeny farieb. Všetky sa píšu do vlastnosti background.
- linear-gradient：linear-gradient vytvára lineárny gradient, kde sa farba mení pozdĺž priamky v zadanom uhle.
- radial-gradient：radial-gradient vytvára radiálny gradient, kde sa farba šíri z centrálnej polohy smerom von v kruhovom alebo eliptoidnom tvare.
- conic-gradient：conic-gradient vytvára kónický gradient, kde sa farba mení v smere hodinových ručičiek okolo centrálnej polohy.
Zhoda medzi uhlom a smerovými kľúčovými slovami
Uhol v linear-gradient sa uvádza v stupňoch. 0deg smeruje zdola nahor a hodnota sa zvyšuje v smere hodinových ručičiek. Uhol je možné zadať aj pomocou smerovej frázy ako "to right". 90deg je to isté ako "to right" a 180deg ako "to bottom".
Ako napísať zastávky farieb a priehľadnosť
Zastávka farby (color stop) je miesto v gradiente, kde má konkrétnu farbu. 0% je začiatok a 100% je koniec. Napríklad "#3B82F6 0%, #8B5CF6 100%" znamená, že farba sa zmení z modrej na fialovú.
- Formát #RRGGBB：Formát #RRGGBB vyjadruje farbu pomocou šestnástkových číslic pre červenú, zelenú a modrú zložku. #FF0000 predstavuje nepriesvitnu červenú.
- Formát rgba：Formát rgba vyjadruje farbu pomocou červenej, zelenej a modrej hodnoty (0–255) a priehľadnosti (0–1). Priehľadnosť 0,5 znamená polovičnú priehľadnosť.
Bezpečnosť a ochrana súkromia
Spracovanie v prehliadači
Zadané údaje sa spracúvajú len vo vašom prehliadači a neodosielajú sa von.
Spracovanie iba v prehliadači
Generovanie kódu gradientu sa vykonáva výlučne vo vašom prehliadači a vstupné údaje sa neposielajú na server.
Komunikácia je šifrovaná cez HTTPS
Načítavanie stránky je tiež šifrované pomocou TLS a tretie strany nemôžu čítať obsah.
Bez odosielania tretím stranám
Vstupný obsah sa neposiela do externých služieb, ako sú sieťami reklám alebo sledovania.
Bez automatického ukladania výsledkov
Zvolené farby a nastavenia ani vstupné návrhy sa neukladajú na serveri.
Sledujte RAKKOTOOLS pri vyhľadávaní v Google
185 užitočných nástrojov budú ľahšie nájditeľné pri vyhľadávaní v Google a AI vyhľadávaní!
- Nájdete pri vyhľadávaní
- Zobrazí sa aj v AI vyhľadávaní
- Objavte nové nástroje
Aktualizácie
- update #312
Pridaný generátor CSS gradientov s generovaním kódu výberom farby a uhla