ಉಚಿತ CSS ಗ್ರೇಡಿಯಂಟ್ ಜನರೇಟರ್

ಇದು ಹೇಗೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ

ಗ್ರೇಡಿಯಂಟ್ ಜನರೇಟರ್ CSS ಗ್ರೇಡಿಯಂಟ್ ಸ್ಟ್ರಿಂಗ್‌ಗಳನ್ನು ನೇರವಾಗಿ ಬ್ರೌಸರ್‌ನಲ್ಲಿ ನಿರ್ಮಿಸುತ್ತದೆ — ಯಾವುದೇ ಲೈಬ್ರರಿ ಇಲ್ಲ, ಸರ್ವರ್ ಇಲ್ಲ, ಅಪ್‌ಲೋಡ್ ಇಲ್ಲ. ಒಂದು ಕೈಯಿಂದ ಬರೆದ ಫಂಕ್ಷನ್ ನಿಮ್ಮ ಬಣ್ಣ ನಿಲುಗಡೆಗಳು ಮತ್ತು ಕೋನದಿಂದ ನೈಜ ಸಮಯದಲ್ಲಿ ಸರಿಯಾದ linear-gradient, radial-gradient, ಅಥವಾ conic-gradient ಸಿಂಟ್ಯಾಕ್ಸ್ ಜೋಡಿಸುತ್ತದೆ, ನಂತರ ನೀವು ಆಯ್ಕೆ ಮಾಡುವ ಔಟ್‌ಪುಟ್ ಗುರಿಗೆ ಫಲಿತಾಂಶ ಫಾರ್ಮ್ಯಾಟ್ ಮಾಡುತ್ತದೆ.

1. 1
   ನಿಲುಗಡೆಗಳು ಮತ್ತು ದಿಕ್ಕನ್ನು ಸಂರಚಿಸಿ

   ನೀವು ಬ್ರೌಸರ್‌ನ ಸ್ಥಳೀಯ ಬಣ್ಣ ಆಯ್ಕೆಗಾರ ಬಳಸಿ 2 ರಿಂದ 6 ಬಣ್ಣ ನಿಲುಗಡೆಗಳನ್ನು ಹೊಂದಿಸುತ್ತೀರಿ, ನಂತರ ರೇಂಜ್ ಸ್ಲೈಡರ್‌ನೊಂದಿಗೆ 0–100% ಅಕ್ಷದ ಉದ್ದಕ್ಕೂ ಪ್ರತಿ ನಿಲುಗಡೆಯನ್ನು ಸ್ಥಾನೀಕರಿಸುತ್ತೀರಿ. ರೇಖೀಯ ಮತ್ತು ಕಾನಿಕ್ ಗ್ರೇಡಿಯಂಟ್‌ಗಳಿಗೆ ನೀವು ಕೋನವನ್ನೂ (0–360°) ಆಯ್ಕೆ ಮಾಡುತ್ತೀರಿ; ರೇಡಿಯಲ್ ಗ್ರೇಡಿಯಂಟ್‌ಗಳಿಗೆ ನೀವು ಆಕಾರವನ್ನು (ಎಲಿಪ್ಸ್ ಅಥವಾ ವೃತ್ತ) ಮತ್ತು ಗ್ರೇಡಿಯಂಟ್ ಎಷ್ಟು ದೂರ ವಿಸ್ತರಿಸುತ್ತದೆ ಎಂದು ನಿಯಂತ್ರಿಸುವ ಗಾತ್ರ ಕೀವರ್ಡ್ ಆಯ್ಕೆ ಮಾಡುತ್ತೀರಿ.
2. 2
   buildCss ಗ್ರೇಡಿಯಂಟ್ ಸ್ಟ್ರಿಂಗ್ ಜೋಡಿಸುತ್ತದೆ

   ಪ್ರತಿ ಬದಲಾವಣೆಯಲ್ಲಿ, ಸ್ಥಳೀಯ buildCss ಫಂಕ್ಷನ್ ನಿಮ್ಮ ಪ್ಯಾರಾಮೀಟರ್‌ಗಳನ್ನು ಸರಿಯಾದ CSS ಫಂಕ್ಷನ್ ಕರೆಗೆ ಒಟ್ಟುಗೂಡಿಸುತ್ತದೆ — ಉದಾ. linear-gradient(135deg, #0ea5e9 0%, #14b8a6 100%). ಯಾವುದೇ ಲೈಬ್ರರಿ ಒಳಗೊಳ್ಳುವುದಿಲ್ಲ; ಸ್ಟ್ರಿಂಗ್ ಅನ್ನು ಸಾದಾ JavaScript ಟೆಂಪ್ಲೇಟ್ ತರ್ಕದೊಂದಿಗೆ ನಿರ್ಮಿಸಿ ನಿಲುಗಡೆ ಅರೇಯಿಂದ ನೇರವಾಗಿ ಜೋಡಿಸಲಾಗುತ್ತದೆ.
3. 3
   ಲೈವ್ ಮುನ್ನೋಟ ಇನ್‌ಲೈನ್ ಶೈಲಿ ಮೂಲಕ ರೆಂಡರ್ ಆಗುತ್ತದೆ

   ಜೋಡಿಸಿದ ಗ್ರೇಡಿಯಂಟ್ ಸ್ಟ್ರಿಂಗ್ ಅನ್ನು div ಎಲಿಮೆಂಟ್‌ಗೆ ಇನ್‌ಲೈನ್ ಹಿನ್ನೆಲೆ ಶೈಲಿಯಾಗಿ ನೇರವಾಗಿ ಅನ್ವಯಿಸಲಾಗುತ್ತದೆ, ಆದ್ದರಿಂದ ಬ್ರೌಸರ್‌ನ ಸ್ವಂತ CSS ಇಂಜಿನ್ ಮುನ್ನೋಟ ರೆಂಡರ್ ಮಾಡುತ್ತದೆ. ಯಾವುದೇ ಕ್ಯಾನ್ವಾಸ್ ಅಥವಾ ಚಿತ್ರ ಒಳಗೊಳ್ಳುವುದಿಲ್ಲ — ನೀವು ನೋಡುವುದು ಅಕ್ಷರಶಃ ಅನ್ವಯಿಸುತ್ತಿರುವ CSS ಪ್ರಾಪರ್ಟಿ.
4. 4
   ನಾಲ್ಕು ಫಾರ್ಮ್ಯಾಟ್‌ಗಳಲ್ಲಿ ನಕಲಿಸಲು ಸಿದ್ಧ ಔಟ್‌ಪುಟ್

   ಫಾರ್ಮ್ಯಾಟ್ ಆಯ್ಕೆಗಾರ ಅದೇ ಗ್ರೇಡಿಯಂಟ್ ಸ್ಟ್ರಿಂಗ್ ಅನ್ನು ಸಾದಾ CSS (background: ...), ಘನ-ಫಾಲ್‌ಬ್ಯಾಕ್‌ನೊಂದಿಗೆ CSS ಬ್ಲಾಕ್, Tailwind ನಿರಂಕುಶ-ಮೌಲ್ಯ ವರ್ಗ, ಅಥವಾ SCSS ವೇರಿಯಬಲ್ ಘೋಷಣೆಯಾಗಿ ಪರಿವರ್ತಿಸುತ್ತದೆ. ನಕಲಿಸಿ ಕ್ಲಿಕ್ ಮಾಡುವುದು navigator.clipboard.writeText ಮೂಲಕ ಆಯ್ಕೆ ಮಾಡಿದ ಔಟ್‌ಪುಟ್ ಅನ್ನು ಕ್ಲಿಪ್‌ಬೋರ್ಡ್‌ಗೆ ಬರೆಯುತ್ತದೆ. ಪ್ರಸ್ತುತ ಗ್ರೇಡಿಯಂಟ್ ಅನ್ನು URL ಹ್ಯಾಶ್‌ಗೂ ಎನ್‌ಕೋಡ್ ಮಾಡಲಾಗುತ್ತದೆ ಆದ್ದರಿಂದ ನೀವು ಅದನ್ನು ಬುಕ್‌ಮಾರ್ಕ್ ಅಥವಾ ಹಂಚಿಕೊಳ್ಳಬಹುದು.

ಸಂಬಂಧಿತ ಪರಿಕರಗಳು