Ġeneratur tal-gradjent CSS

Kif tuża l-ġeneratur tal-gradjent CSS

1. Agħżel Tip ta’ gradjent: Lineari, Radjali jew Koniku. Il-previżjoni l-kbira fuq nett tinbidel ma’ kull bidla.
2. Għal gradjent lineari, issettja l-Angolu bis-slider jew ikteb f’gradi (90° imur minn xellug għal lemin, 180° minn fuq għal isfel). Għal gradjent koniku, l-angolu huwa l-punt fejn tibda d-dawra.
3. Għal gradjenti radjali u koniċi, ċaqlaq iċ-ċentru b’Ċentru X u Ċentru Y. Gradjent radjali jista’ jkun Ċirku jew Ellissi (il-menu Forma).
4. Editja l-Stops tal-kuluri. Ikklikkja kullimkien fuq il-bar biex iżżid stop hemm bil-kulur li l-gradjent diġà għandu f’dak il-punt, jew uża Żid stop biex timla l-akbar vojt. Kaxkar handle biex tiċċaqlqu. Kull stop għandu wkoll ringiela fejn tista’ tagħżel il-kulur tiegħu, tikteb kwalunkwe kulur CSS, tissettja l-Pożizzjoni (%) tiegħu jew Neħħi (gradjent iżomm żewġ stops mill-inqas).
5. Jekk trid, agħżel Ripetut, agħżel l-Interpolazzjoni tal-kuluri, ikklikkja Aqleb biex taqleb l-istops jew Gradjent każwali għal ispirazzjoni.
6. Ikkopja r-riżultat minn Kodiċi CSS b’Ikkopja.

Keyboard: iffoka handle fuq il-bar, imbagħad uża ċ-ċwievet tal-vleġġa biex tiċċaqlqu b’1 % (10 % b’Shift), Home u End biex taqbeż għat-truf, u Delete biex tneħħih.

Il-ġeneratur jaħdem kollu fil-brawżer tiegħek; xejn minn dak li tikteb ma jintbagħat lil server.

It-tliet funzjonijiet tal-gradjent

• linear-gradient() iħallat il-kuluri tul linja dritta. linear-gradient(90deg, #4f46e5 0%, #ec4899 100%) imur minn indaku fuq ix-xellug għal roża fuq il-lemin. L-angoli huma fid-direzzjoni tal-arloġġ mill-ponta ta’ fuq: 0deg jipponta ’l fuq, 90deg lejn il-lemin.
• radial-gradient() jinfirex minn punt ċentrali. radial-gradient(circle at 30% 40%, …) iqiegħed iċ-ċentru 30 % mix-xellug u 40 % minn fuq. Ellissi titkabbar mal-kaxxa, ċirku jibqa’ tond.
• conic-gradient() jiċċaqlaq madwar ċentru bħall-lanċetti ta’ arloġġ. conic-gradient(from 0deg at 50% 50%, …) jagħmel rotot tal-kuluri, charts tonda u effetti ta’ spinner. Il-pożizzjonijiet tal-istops huma sehem mit-dawra sħiħa.

L-għażla Ripetut tuża repeating-linear-gradient() u l-aħwa tiegħu: il-mudell definit mill-istops tiegħek jirrepeti sakemm timtela l-kaxxa kollha. Poġġi l-aħħar stop ferm taħt 100 % (per eżempju 20 %) biex tara strixxi jew ċrieki.

Żewġ stops fl-istess pożizzjoni joħolqu tarf iebes minflok taħlita, u hekk isiru l-istrixxi u l-bnadar. Il-ġeneratur iżomm l-istops ordnati skont il-pożizzjoni fil-kodiċi, kif jeħtieġ CSS.

Interpolazzjoni sRGB jew OKLCH

B’mod awtomatiku, il-brawżers iħalltu l-kuluri tal-gradjent f’sRGB. Bejn żewġ kuluri saturati, bħal blu u isfar, dan spiss joħloq nofs griż jew imċajpar. CSS Color Level 4 iħallik tagħżel l-ispazju tal-interpolazzjoni: linear-gradient(90deg in oklch, …) iħallat fl-ispazju perċettwali OKLCH u jżomm in-nofs ħaj.

Bl-għażla OKLCH (iktar bla xkiel, b’fallback sRGB), l-għodda tikteb żewġ dikjarazzjonijiet background: l-ewwel il-verżjoni klassika sRGB, imbagħad dik OKLCH. Il-brawżers li jappoġġjaw spazji ta’ interpolazzjoni (Chrome u Edge 111+, Safari 16.2+, Firefox 127+) jużaw it-tieni linja; dawk iktar qodma jinjorawha u jżommu l-ewwel waħda.

Pariri

• Kuluri b’trasparenza jiġu aċċettati fl-oqsma tal-istops, per eżempju #00000080 jew rgb(0 0 0 / 50%), utli għal overlays fuq l-immaġini.
• Il-kodiċi jinkiteb b’background. Uża background-image minflok jekk tissettja proprjetajiet oħra tal-isfond separatament.
• Gradjenti sottili (żewġ sfumaturi qrib ta’ kulur wieħed) normalment jidhru iktar professjonali minn taħlitiet ta’ qawsalla.