🌅CSS Gradient Generator

Pagkakaiba ng linear, radial, at conic

Ang CSS gradient ay may 3 iba't ibang function depende sa paraan ng pagbabago ng kulay, at lahat ay ginagamit sa pamamagitan ng pagsusulat sa background property.

• linear-gradient：linear-gradient ay isang linear gradient kung saan ang kulay ay nagbabago sa isang tuwid na linya sa nakatakdang anggulo.
• radial-gradient：radial-gradient ay isang radial gradient kung saan ang kulay ay lumalawak sa hugis ng bilog o ellipse mula sa posisyon ng sentro tungo sa labas.
• conic-gradient：conic-gradient ay isang conic gradient kung saan ang kulay ay nagbabago habang umiikot ng isang beses sa paligid ng posisyon ng sentro sa clockwise na direksyon.

Pagsasangkot ng Anggulo at Direction Keyword

Ang anggulo ng linear-gradient ay nagsisimula sa 0deg na sumasagot sa direksyon mula sa ibaba hanggang sa itaas, at tumataas ang anggulo kapag umiikot ng clockwise. Ang anggulo ay maaaring isulat gamit ang direction keyword tulad ng 'to right', at ang 90deg ay pareho sa direksyon ng 'to right', at ang 180deg ay pareho sa 'to bottom'.

Paraan ng Pagsusulat ng Color Stop at Transparency

Ang color stop (color stop) ay ang posisyon kung saan ang kulay ay nangyayari sa gradient, kung saan ang 0% ay ang simula at ang 100% ay ang dulo. Halimbawa, ang '#3B82F6 0%, #8B5CF6 100%' ay isang nakalatag kung saan ang kulay ay nagbabago mula sa asul sa simula hanggang sa lila sa dulo.

• Anyo ng #RRGGBB：Ang #RRGGBB format ay isang paraan ng pagsusulat ng kulay kung saan ang intensity ng pula, berde, at asul ay bawat 2-digit hexadecimal, at ang #FF0000 ay kumakatawan sa opaque na pula.
• Anyo ng rgba：Ang rgba format ay isang paraan ng pagsusulat ng kulay na nagdadagdag ng transparency (0 hanggang 1) sa mga halaga ng pula, luntian, at asul (0 hanggang 255), at ang transparency na 0.5 ay kumakatawan sa semi-transparent na kulay.