ಉಚಿತ ಪರಿವರ್ತಕ

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

ಲೈವ್ ಪೂರ್ವವೀಕ್ಷಣೆಯೊಂದಿಗೆ CSS ಗ್ರೇಡಿಯಂಟ್‌ಗಳನ್ನು ದೃಷ್ಟಿಗೋಚರವಾಗಿ ರಚಿಸಿ. ಕಸ್ಟಮ್ ಬಣ್ಣದ ನಿಲುಗಡೆಗಳೊಂದಿಗೆ ರೇಖೀಯ, ರೇಡಿಯಲ್ ಮತ್ತು ಕೋನಿಕ್ ಗ್ರೇಡಿಯಂಟ್ಗಳನ್ನು ರಚಿಸಿ - ಉಚಿತ ಮತ್ತು ಕ್ಲೈಂಟ್-ಸೈಡ್.

ಲೈವ್ ಪೂರ್ವವೀಕ್ಷಣೆ
ಸಿಎಸ್ಎಸ್ ಔಟ್ಪುಟ್
.element {
  background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%);
}
Gradient Type
ಕೋನ (90deg)
90°180°270°360°
Color Stops
#6366f10%
#ec4899100%

ಈ ಉಪಕರಣದ ಬಗ್ಗೆ

ದೃಶ್ಯ ಸಂಪಾದಕದೊಂದಿಗೆ ಸುಂದರವಾದ CSS ರೇಖೀಯ ಮತ್ತು ರೇಡಿಯಲ್ ಗ್ರೇಡಿಯಂಟ್‌ಗಳನ್ನು ರಚಿಸಿ. ಬಣ್ಣಗಳನ್ನು ಆರಿಸಿ, ನಿಲ್ದಾಣಗಳನ್ನು ಹೊಂದಿಸಿ, ದಿಕ್ಕು ಅಥವಾ ಕೋನವನ್ನು ಬದಲಾಯಿಸಿ ಮತ್ತು ನೈಜ ಸಮಯದಲ್ಲಿ ಲೈವ್ ಪೂರ್ವವೀಕ್ಷಣೆ ನವೀಕರಣವನ್ನು ನೋಡಿ. ಹಳೆಯ ಬ್ರೌಸರ್‌ಗಳಿಗಾಗಿ ಮಾರಾಟಗಾರರ ಪೂರ್ವಪ್ರತ್ಯಯಗಳನ್ನು ಒಳಗೊಂಡಂತೆ - ರಚಿಸಿದ CSS ಕೋಡ್ ಅನ್ನು ನಕಲಿಸಿ ಮತ್ತು ಅದನ್ನು ನೇರವಾಗಿ ನಿಮ್ಮ ಸ್ಟೈಲ್‌ಶೀಟ್‌ಗೆ ಅಂಟಿಸಿ.

ಬಳಸುವುದು ಹೇಗೆ

  1. ಗ್ರೇಡಿಯಂಟ್ ಪ್ರಕಾರವನ್ನು ಆರಿಸಿ: ರೇಖೀಯ ಅಥವಾ ರೇಡಿಯಲ್.
  2. ಗ್ರೇಡಿಯಂಟ್ ಬಾರ್ ಅನ್ನು ಕ್ಲಿಕ್ ಮಾಡುವ ಮೂಲಕ ಮತ್ತು ಬಣ್ಣಗಳನ್ನು ಆಯ್ಕೆ ಮಾಡುವ ಮೂಲಕ ಬಣ್ಣದ ನಿಲುಗಡೆಗಳನ್ನು ಸೇರಿಸಿ.
  3. ನಿಯಂತ್ರಣಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಗ್ರೇಡಿಯಂಟ್ ಕೋನವನ್ನು (ರೇಖೀಯ) ಅಥವಾ ಸ್ಥಾನವನ್ನು (ರೇಡಿಯಲ್) ಹೊಂದಿಸಿ.
  4. ಔಟ್‌ಪುಟ್ ಪ್ಯಾನೆಲ್‌ನಿಂದ ರಚಿತವಾದ CSS ಕೋಡ್ ಅನ್ನು ನಕಲಿಸಿ.

ಪದೇ ಪದೇ ಕೇಳಲಾಗುವ ಪ್ರಶ್ನೆಗಳು

ಎಲ್ಲಾ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ CSS ಗ್ರೇಡಿಯಂಟ್‌ಗಳು ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತವೆಯೇ?
ಕ್ರೋಮ್, ಫೈರ್‌ಫಾಕ್ಸ್, ಸಫಾರಿ ಮತ್ತು ಎಡ್ಜ್ ಸೇರಿದಂತೆ ಎಲ್ಲಾ ಪ್ರಸ್ತುತ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ಆಧುನಿಕ CSS ಗ್ರೇಡಿಯಂಟ್‌ಗಳು (ಲೀನಿಯರ್-ಗ್ರೇಡಿಯಂಟ್, ರೇಡಿಯಲ್-ಗ್ರೇಡಿಯಂಟ್) ಬೆಂಬಲಿತವಾಗಿದೆ. ಉಪಕರಣವು ಐಚ್ಛಿಕವಾಗಿ ಹಳೆಯ ಬ್ರೌಸರ್ ಆವೃತ್ತಿಗಳಿಗೆ -webkit- ಪೂರ್ವಪ್ರತ್ಯಯಗಳನ್ನು ರಚಿಸಬಹುದು.
ನಾನು ಬಹು-ಬಣ್ಣದ ಗ್ರೇಡಿಯಂಟ್‌ಗಳನ್ನು ರಚಿಸಬಹುದೇ?
ಹೌದು. ನಿಮಗೆ ಅಗತ್ಯವಿರುವಷ್ಟು ಬಣ್ಣದ ನಿಲುಗಡೆಗಳನ್ನು ಸೇರಿಸಿ. ಬಣ್ಣಗಳು ಎಲ್ಲಿ ಮಿಶ್ರಣಗೊಳ್ಳುತ್ತವೆ ಎಂಬುದನ್ನು ನಿಯಂತ್ರಿಸಲು ನೀವು ಪ್ರತಿ ನಿಲ್ದಾಣದ ಸ್ಥಾನವನ್ನು ಸಹ ಸರಿಹೊಂದಿಸಬಹುದು. ಇದು ಸಂಕೀರ್ಣವಾದ ಮಳೆಬಿಲ್ಲು, ಸೂರ್ಯಾಸ್ತ ಅಥವಾ ಕಸ್ಟಮ್ ಬ್ರ್ಯಾಂಡ್ ಗ್ರೇಡಿಯಂಟ್‌ಗಳನ್ನು ಅನುಮತಿಸುತ್ತದೆ.
ರೇಡಿಯಲ್ ಮತ್ತು ರೇಡಿಯಲ್ ಗ್ರೇಡಿಯಂಟ್‌ಗಳ ನಡುವಿನ ವ್ಯತ್ಯಾಸವೇನು?
ಲೀನಿಯರ್ ಗ್ರೇಡಿಯಂಟ್‌ಗಳು ನೇರ ರೇಖೆಯ ಉದ್ದಕ್ಕೂ ಬಣ್ಣಗಳನ್ನು ಬದಲಾಯಿಸುತ್ತವೆ (ಮೇಲಿನಿಂದ ಕೆಳಕ್ಕೆ, ಎಡದಿಂದ ಬಲಕ್ಕೆ, ಕರ್ಣೀಯ, ಅಥವಾ ಯಾವುದೇ ಕೋನ). ರೇಡಿಯಲ್ ಇಳಿಜಾರುಗಳು ವೃತ್ತಾಕಾರದ ಅಥವಾ ದೀರ್ಘವೃತ್ತದ ಆಕಾರದಲ್ಲಿ ಕೇಂದ್ರ ಬಿಂದುವಿನಿಂದ ಹೊರಕ್ಕೆ ಬಣ್ಣಗಳನ್ನು ಬದಲಾಯಿಸುತ್ತವೆ.
ನಾನು ಗ್ರೇಡಿಯಂಟ್ ಅನ್ನು ಪಠ್ಯಕ್ಕೆ ಹಿನ್ನೆಲೆಯಾಗಿ ಬಳಸಬಹುದೇ?
ಹೌದು. ಹಿನ್ನೆಲೆ-ಕ್ಲಿಪ್ ಬಳಸಿ: -ವೆಬ್‌ಕಿಟ್-ಪಠ್ಯ-ಭರ್ತಿ-ಬಣ್ಣದೊಂದಿಗೆ ಪಠ್ಯ: ಪಠ್ಯಕ್ಕೆ ಗ್ರೇಡಿಯಂಟ್ ಅನ್ನು ಅನ್ವಯಿಸಲು ಪಾರದರ್ಶಕ. ರಚಿಸಲಾದ CSS ಗ್ರೇಡಿಯಂಟ್ ವ್ಯಾಖ್ಯಾನವನ್ನು ಒದಗಿಸುತ್ತದೆ - ಗ್ರೇಡಿಯಂಟ್ ಪಠ್ಯಕ್ಕಾಗಿ ಈ ಗುಣಲಕ್ಷಣಗಳೊಂದಿಗೆ ಅದನ್ನು ಸಂಯೋಜಿಸಿ.