CSS Gradient Generator

Hvað er þetta verkfæri?

CSS litstiglar eru myndir sem vafrinn býr til úr lista af litum, frekar en skrár sem þú hleður upp — linear-gradient() skiptir um liti eftir beinni línu í tilteknu horni, á meðan radial-gradient() skiptir um liti út frá miðpunkti. Báðir taka við tveimur eða fleiri litstoppum, hver þeirra með valfrjálsa staðsetningu meðfram litstiglinum.

Í höndunum er auðvelt að klúðra litstiglum örlítið: röð litstoppa, vantandi prósentur, eða hornagildi í ranga átt (CSS horn ganga réttsælis frá 'to top', ólíkt stærðfræðihornum). Þetta tól heldur syntaxinu úr vegi — stilltu liti og staðsetningar með litavöljurum og sleðum, fylgstu með forskoðunarkassanum uppfærast í rauntíma, og afritaðu CSS-ið sem myndast þegar það lítur rétt út.

Heimild: CSS Images Module Level 3, W3C — staðallinn sem skilgreinir linear-gradient() og radial-gradient() syntaxið.

Af hverju að nota það?

• Bein forskoðun uppfærist samstundis við hverja breytingu á lit, staðsetningu og horni — engin þörf á að endurhlaða síðu til að sjá útkomuna.
• Skiptu á milli línulegra og hringlaga litstigla með einum smelli; hornstýringin felur sig sjálfkrafa fyrir hringlaga litstigla, þar sem hún á ekki við.
• Bættu við eða fjarlægðu litstoppa (2 til 4) í stað þess að vera bundin(n) við fastan tveggja lita litstigul.
• Hver stoppur hefur sinn eigin staðsetningarsleða, svo stoppar þurfa ekki að vera jafnt dreifðir.
• Skilar tilbúnu CSS-i með stöðluðu linear-gradient()/radial-gradient() syntaxi.
• Keyrir algjörlega í vafranum þínum — ekkert sem þú stillir er sent neitt. Ókeypis, engin skráning, virkar í síma.

Hvernig á að nota það

1. Veldu Línulegt eða Hringlaga sem tegund litstiguls.
2. Fyrir línulegan litstigul, dragðu hornsleðann — 90deg fer frá vinstri til hægri, 180deg fer frá toppi til botns, og svo framvegis.
3. Stilltu lit og staðsetningu fyrir hvern stopp; fyrsti stoppurinn er upphafslitur litstigulsins, sá síðasti er lokaliturinn.
4. Smelltu á '+ Add stop' til að bæta við allt að 4 stoppum samtals fyrir fjöllitan litstigul, eða ✕ hnappinn til að fjarlægja einn (lágmark 2).
5. Afritaðu CSS-ið sem myndast og límdu inn í background eða background-image yfirlýsingu.

Dæmi

Inntak

Línulegt · Horn: 90deg · Stoppar: #f97316 við 0%, #ec4899 við 100%

Úttak

background: linear-gradient(90deg, #f97316 0%, #ec4899 100%);

Litstigull frá appelsínugulum í bleikan, frá vinstri til hægri — algengur stíll fyrir hnappa, borða og hero-bakgrunna.

Línulegir vs. hringlaga litstiglar

Línulegur litstigull skiptir um lit eftir beinni línu, stjórnað af horni — gagnlegt fyrir borða, hnappa og áttbundinn bakgrunn. Hringlaga litstigull skiptir um lit út frá miðpunkti í útþenjandi hringjum, sem hentar kastljósáhrifum, merkjum eða ljómandi bakgrunni. Þetta tól notar sjálfgefið hringlögun miðjaða í kassanum fyrir hringlaga litstigul, sem nær yfir algengustu notkunina; CSS styður líka sporöskjulaga form og staðsetningar utan miðju ef þú þarft að handbreyta útkomunni frekar.

Algeng litstigulsmynstur

• Lágstemmt vörumerkjaáherslu: tveir náskyldir litblæir (t.d. tvö afbrigði af sama lit) í grunnu horni fyrir mjúkan bakgrunnsþvott.
• Skerpuríkur CTA-hnappur: tveir mettaðir, andstæðir litir í 90deg eða 135deg fyrir djarft, smellanlegt útlit.
• Yfirlagning á mynd: litstigull frá gagnsæi í heilan lit (stilltu gagnsæi með rgba-lit í undirliggjandi hex-gildi litavaljarans, eða breyttu eftir afritun) lagður yfir background-image.
• Fjöllitur regnbogi/vörumerkjastigull: 3–4 stoppar dreifðir yfir allt 0–100% bilið fyrir mýkri, hægari umbreytingar en tveggja lita litstigull leyfir.
• Hringlaga kastljós: bjartur miðstopp nálægt 0% sem dofnar í dekkri jaðarstopp nálægt 100%, gagnlegt fyrir hero-svæði eða áherslur á kortum.

Samsetning með öðrum CSS-tólum

Litstiglar eru oft sameinaðir ávölum hornum og skuggum á sama stakinu — litstigulskort með mjúkri box-shadow og ávölum hornum er algengt viðmótsmynstur. Búðu til hvern hluta fyrir sig og sameinaðu CSS-yfirlýsingarnar á stakinu.

→

Algengar spurningar