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

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

CSS Gradient Generator

Live

Type

Angle135°

Stop 1

Stop 2

Third color stopStop 3

CSS output

background: linear-gradient(135deg, #c026d3 0%, #fb923c 50%, #f43f5e 100%);

Key capabilities

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

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

ಗ್ರೇಡಿಯಂಟ್ ಪ್ರಕಾರ ಮತ್ತು ಕೋನ ಅಥವಾ ಸ್ಥಾನವನ್ನು ಆರಿಸಿ.
ಬಣ್ಣ ನಿಲುಗಡೆಗಳನ್ನು ಸೇರಿಸಿ ಅಥವಾ ಸಂಪಾದಿಸಿ.
ರಚಿಸಿದ CSS ಅನ್ನು ನಕಲಿಸಿ.

How this tool works

ಗ್ರೇಡಿಯಂಟ್ ಪ್ರಕಾರ ಮತ್ತು ಕೋನ ಅಥವಾ ಸ್ಥಾನವನ್ನು ಆರಿಸಿ.
ಬಣ್ಣ ನಿಲುಗಡೆಗಳನ್ನು ಸೇರಿಸಿ ಅಥವಾ ಸಂಪಾದಿಸಿ.
ರಚಿಸಿದ CSS ಅನ್ನು ನಕಲಿಸಿ.

Recommended settings

ಮೊದಲು ಡೀಫಾಲ್ಟ್ ಆಯ್ಕೆಗಳನ್ನು ಬಳಸಿ, ನಂತರ ಅಗತ್ಯವಿದ್ದರೆ ಹೊಂದಿಸಿ

Supported formats

Text / on-page input

File size and limits

ಬಹಳ ಸಂಕೀರ್ಣವಾದ ಬಹು-ಪದರದ ಪೂರ್ವವೀಕ್ಷಣೆಗಳು ಹಳೆಯ ಫೋನ್‌ಗಳಲ್ಲಿ ನಿಧಾನವಾಗಬಹುದು.

Privacy

ಬಣ್ಣ ಮತ್ತು CSS ಜನರೇಟರ್‌ಗಳು ನಿಮ್ಮ ಬ್ರೌಸರ್‌ನಲ್ಲಿ ಸಂಪೂರ್ಣವಾಗಿ ರನ್ ಆಗುತ್ತವೆ. ಪೂರ್ವವೀಕ್ಷಣೆಗಳು ಮತ್ತು ಪರಿವರ್ತನೆಗಳು ನಿಮ್ಮ ಶೈಲಿಗಳನ್ನು ಎಂದಿಗೂ ಅಪ್‌ಲೋಡ್ ಮಾಡುವುದಿಲ್ಲ.

Common use cases

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

Troubleshooting

ಪೇಸ್ಟ್ ಮಾಡಿದ ನಂತರ ಪೂರ್ವವೀಕ್ಷಣೆ ವಿಭಿನ್ನವಾಗಿ ಕಾಣುತ್ತದೆ

ನಿಮ್ಮ ಪುಟದಲ್ಲಿ ಸ್ಪರ್ಧಾತ್ಮಕ CSS ಅನ್ನು ಪರಿಶೀಲಿಸಿ (ಮರುಹೊಂದಿಕೆಗಳು, ಆನುವಂಶಿಕ ಬಣ್ಣಗಳು). ರಚಿಸಲಾದ ನಿಯಮವನ್ನು ಮೊದಲು ಪ್ರತ್ಯೇಕವಾದ ಸ್ಟೈಲ್‌ಶೀಟ್‌ಗೆ ನಕಲಿಸಿ.

FAQ

ಇದು ನನ್ನ CSS ಅನ್ನು ಅಪ್‌ಲೋಡ್ ಮಾಡುತ್ತದೆಯೇ?

ಇಲ್ಲ. ಜನರೇಟರ್‌ಗಳು ಮತ್ತು ಪರಿವರ್ತಕಗಳು ಲೈವ್ ಪೂರ್ವವೀಕ್ಷಣೆಯೊಂದಿಗೆ ನಿಮ್ಮ ಬ್ರೌಸರ್‌ನಲ್ಲಿ ರನ್ ಆಗುತ್ತವೆ.

ನನಗೆ ಖಾತೆ ಬೇಕೇ?

ಇಲ್ಲ. ಉಪಕರಣವನ್ನು ತೆರೆಯಿರಿ, ನಿಯಂತ್ರಣಗಳನ್ನು ಟ್ವೀಕ್ ಮಾಡಿ ಮತ್ತು CSS ಅನ್ನು ನಕಲಿಸಿ.