Generátor prechodov CSS
Vytvorte lineárne a radiálne prechody CSS so živým náhľadom a skopírujte hotový kód vlastnosti background.
Súvisiace nástroje
Ako používať nástroj Prechod CSS
- 01
Vyberte lineárny alebo radiálny gradient.
- 02
Pridajte farebné zarážky a presuňte každú farbu a polohu.
- 03
Pre lineárny prechod nastavte uhol posuvníkom.
- 04
Skopírujte CSS a vložte ho do svojej šablóny so štýlmi.
Čo robí tento generátor
Tento generátor prechodov CSS vytvára lineárne a radiálne prechody z farebných bodov, ktoré ovládate, so živým náhľadom a deklaráciou vlastnosti background pripravenou na vloženie. Posúvajte body po lište, nastavte uhol alebo tvar a CSS sa okamžite aktualizuje.
Všetko beží vo vašom prehliadači z farieb a nastavení, ktoré si vyberiete, takže sa nič nenahráva a výsledok môžete skopírovať a použiť offline.
Lineárne a radiálne gradienty
Lineárny prechod spája farby pozdĺž priamky a uhol určuje jeho smer: 0 stupňov smeruje nahor, 90 stupňov doprava a 180 stupňov nadol. Radiálny prechod sa šíri od stredu ako kruh alebo elipsa.
Oba sú štandardné hodnoty CSS zapísané ako linear-gradient() a radial-gradient(). Používajú rovnaký zoznam farebných bodov, takže pri prepnutí typu zostanú farby zachované a zmení sa iba spôsob ich rozloženia.
Práca s farebnými bodmi
Každý farebný bod určuje farbu na pozícii od 0 % do 100 %. Prechod plynulo mieša farby medzi susednými bodmi, takže ich poloha určuje priebeh prelínania.
Pridajte ľubovoľný počet farebných bodov, posúvaním dolaďte prelínanie alebo kliknite na lištu a vložte nový bod na požadované miesto. Prechod musí mať najmenej dva body.
Používanie CSS vo vašom projekte
Skopírujte vygenerovaný kód a vložte ho ako pozadie akéhokoľvek prvku, ako je sekcia, karta alebo tlačidlo. Moderné prehliadače podporujú lineárny gradient a radiálny gradient bez predpony dodávateľa, takže hodnota funguje tak, ako je.
Pretože prechod je len hodnota, môžete ho použiť aj kdekoľvek, kde sa očakáva obrázok na pozadí, navrstviť ho na plnú farbu ako záložný prvok alebo znova použiť rovnaké zarážky v lineárnej a radiálnej verzii pre konzistentný vzhľad.
Často kladené otázky
Aký je rozdiel medzi lineárnym a radiálnym gradientom?
Lineárny prechod mieša farby pozdĺž priamky pod vami nastaveným uhlom. Radiálny gradient prechádza smerom von od stredu v kruhu. Obaja používajú rovnaké farebné zarážky.
Ako fungujú farebné body?
Každý bod určuje farbu na pozícii od 0 % do 100 %. Prechod plynulo mieša farby medzi susednými bodmi, takže ich posúvaním meníte priebeh prelínania.
Ako môžem použiť vygenerovaný CSS?
Skopírujte kód a vložte ho ako vlastnosť pozadia ľubovoľného prvku, napríklad prvku div alebo tlačidla. Funguje v každom modernom prehliadači bez predpony.
Môžem pridať viac ako dve farby?
Áno. Tlačidlom Pridať farebný bod vložte ľubovoľný počet farieb a potom nastavte polohu každej z nich.
Je niečo nahrané?
Nie. Prechod je vytvorený výlučne vo vašom prehliadači z farieb a nastavení, ktoré si vyberiete, a nič sa neodošle na server.