Gjenerator gradienti CSS

Si ta përdorësh gjeneratorin e gradientit CSS

1. Zgjidh një Lloj gradienti: Linear, Radial ose Konik. Pamja e madhe paraprake lart përditësohet me çdo ndryshim.
2. Për një gradient linear, cakto Këndin me rrëshqitësin ose shkruaje në gradë (90° shkon nga e majta në të djathtën, 180° nga lart poshtë). Për një gradient konik, këndi është vendi ku nis fshirja.
3. Për gradientët radialë e konikë, lëviz qendrën me Qendra X dhe Qendra Y. Një gradient radial mund të jetë Rreth ose Elipsë (menuja Forma).
4. Ndrysho Pikat e ngjyrave. Kliko kudo në shirit për të shtuar një pikë aty me ngjyrën që gradienti ka tashmë në atë vend, ose përdor Shto pikë për të mbushur boshllëkun më të gjerë. Zhvendos një dorezë për ta lëvizur. Çdo pikë ka edhe një rresht ku mund të zgjedhësh ngjyrën, të shkruash çdo ngjyrë CSS, të caktosh Pozicionin (%) ose ta Heqësh (një gradient mban të paktën dy pika).
5. Si opsion, shëno Përsëritës, zgjidh Interpolimin e ngjyrave, kliko Përmbys për të kthyer pikat mbrapsht ose Gradient i rastësishëm për frymëzim.
6. Kopjo rezultatin nga Kodi CSS me butonin Kopjo.

Tastierë: fokuso një dorezë në shirit, pastaj përdor shigjetat për ta lëvizur me 1 % (10 % me Shift), Home dhe End për të kërcyer te skajet, dhe Delete për ta hequr.

Tri funksionet e gradientit

• linear-gradient() i përzien ngjyrat përgjatë një vije të drejtë. linear-gradient(90deg, #4f46e5 0%, #ec4899 100%) shkon nga indigo në të majtë te rozë në të djathtë. Këndet janë në drejtim orar nga lart: 0deg drejtohet lart, 90deg djathtas.
• radial-gradient() rrezaton nga një pikë qendrore. radial-gradient(circle at 30% 40%, …) e vendos qendrën 30 % nga e majta dhe 40 % nga lart. Një elipsë shtrihet me kutinë, një rreth mbetet i rrumbullakët.
• conic-gradient() fshin përreth një qendre si akrepat e orës. conic-gradient(from 0deg at 50% 50%, …) krijon rrota ngjyrash, grafikë byrek dhe efekte ngarkimi. Pozicionet e pikave janë pjesë e rrotullimit të plotë.

Opsioni Përsëritës përdor repeating-linear-gradient() dhe të afërmit e saj: motivi i përcaktuar nga pikat e tua përsëritet derisa kutia të mbushet. Vendose pikën e fundit shumë nën 100 % (për shembull 20 %) për të parë vija ose unaza.

Dy pika në të njëjtin pozicion krijojnë një skaj të prerë në vend të një përzierjeje, kështu bëhen vijat dhe flamujt. Gjeneratori i mban pikat të renditura sipas pozicionit në kod, siç e kërkon CSS.

Interpolimi sRGB apo OKLCH

Si parazgjedhje, shfletuesit i përzien ngjyrat e gradientit në sRGB. Mes dy ngjyrave të ngopura, si blu dhe e verdha, kjo shpesh krijon një gri të zbehtë ose mes të papastër. CSS Color Level 4 të lejon të zgjedhësh hapësirën e interpolimit: linear-gradient(90deg in oklch, …) përzien në hapësirën perceptuale OKLCH dhe e mban mesin të gjallë.

Me OKLCH (më i butë, me sRGB si rezervë), mjeti shkruan dy deklarime background: së pari versionin klasik sRGB, pastaj atë OKLCH. Shfletuesit që mbështesin hapësirat e interpolimit (Chrome dhe Edge 111+, Safari 16.2+, Firefox 127+) përdorin rreshtin e dytë; të vjetrit e shpërfillin dhe mbajnë të parin.

Këshilla

• Ngjyrat me tejdukshmëri pranohen në fushat e pikave, për shembull #00000080 ose rgb(0 0 0 / 50%), e dobishme për mbulesa mbi imazhe.
• Kodi shkruhet me background. Përdor background-image në vend të tij nëse i cakton veçmas veti të tjera të sfondit.
• Gradientët e holla (dy nuanca të afërta të një ngjyre) zakonisht duken më profesionalë se përzierjet ylberi.