CSS litstigulsmiður

Búðu til CSS-litstigulskóða með forskoðun einfaldlega með því að velja liti og horn

UppfærsluupplýsingarCSS-litstiglagerð bætt við – veldu liti og horn og fáðu kóðannSkoðaðu uppfærslur

Eiginleikar

Forskoðun og kóði uppfærast samtímis

Í hvert sinn sem þú breytir lit eða horni breytast útlitið og CSS samtímis

Styður línulegt, hringlaga og keilulaga

Horn, lögun og miðjustaðsetning eru stillanleg í smáatriðum fyrir hverja gerð

Allt að 10 litir stilltir með drætti

Staðsetning lita er stillt með drætti á stikunni og gegnsæi með sleða

8 sýnishorn og handahófsgerð

Fínstilltu út frá klassískum litasamsetningum eða handahófskenndum

Notkun

Veldu gerð

Veldu gerð litstiguls úr línulegu, hringlaga eða keilulaga

Ákveddu litina

Veldu liti með litakóða eða sýnishornum, fjölgaðu litum með „Bæta við lit“ og stilltu staðsetningu og gegnsæi

Stilltu stefnuna

Fyrir línulegt notarðu horn eða stefnuhnappa, fyrir hringlaga og keilulaga tilgreinirðu miðjustaðsetningu

Afritaðu kóðann

Límdu eina línu af CSS inn í þinn eigin stíl með „Afrita“-hnappinum

Notkunardæmi

Búa til bakgrunn fyrir aðalmynd

Ákveddu bakgrunnslit forsíðu eða hnappa án þess að skrifa kóða

Velja liti fyrir fyrirsagnir bloggs

Veldu svipaða litasamsetningu úr sýnishornum og snyrtu bakgrunn fyrirsagna greinarinnar

Yfirlag ofan á ljósmynd

Búðu til hálfgegnsætt lag ofan á ljósmynd með lit sem hefur lækkað gegnsæi

Fínstilling fjöllita litstiguls

Færðu skilin milli þriggja eða fleiri lita smám saman til með drætti

Grunnþekking

Munurinn á linear, radial og conic

Í CSS eru þrjú föll fyrir litstigla sem breyta litum á ólíkan hátt, og þau eru öll skrifuð í background-eigindið.

linear-gradient：linear-gradient er línulegur litstigull þar sem liturinn breytist eftir beinni línu í tilgreindu horni.
radial-gradient：radial-gradient er hringlaga litstigull þar sem liturinn breiðist út frá miðjustaðsetningu og út á við í lögun hrings eða sporbaugs.
conic-gradient：conic-gradient er keilulaga litstigull þar sem liturinn breytist á meðan farið er einn hring réttsælis um miðjustaðsetninguna.

Samsvörun horns og stefnuorða

Horn í linear-gradient er þannig að 0deg stefnir neðan frá og upp, og eftir því sem gildið hækkar snýst það réttsælis. Hornið má einnig skrifa með stefnuorði eins og „to right“, þar sem 90deg samsvarar „to right“ og 180deg samsvarar „to bottom“.

Hvernig litstopp og gegnsæi eru skrifuð

Litstopp (color stop) er staðsetningin innan litstigulsins þar sem tiltekinn litur birtist, þar sem 0% táknar upphafspunkt og 100% endapunkt. Til dæmis tilgreinir „#3B82F6 0%, #8B5CF6 100%“ að liturinn breytist úr bláum í upphafi yfir í fjólubláan í lokin.

#RRGGBB-snið：#RRGGBB-snið er ritháttur lita sem táknar styrk rauðs, græns og blás með tveimur stöfum hvert í sextándakerfi, þar sem #FF0000 táknar ógegnsæjan rauðan lit.
rgba-snið：rgba-snið er ritháttur lita þar sem gegnsæi (0–1) bætist við gildi rauðs, græns og blás (0–255), þar sem gegnsæið 0,5 táknar hálfgegnsæjan lit.