Stax

CSS ग्रेडिएंट जनरेटर

विज़ुअली CSS ग्रेडिएंट बनाएं और उपयोग-के-लिए-तैयार CSS कॉपी करें।

0°90°180°270°360°
#6366f1
0%
#ec4899
100%
background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);

CSS ग्रेडिएंट जनरेटर क्या है?

यह visual tool linear, radial, और conic CSS gradients बनाता है। Live preview के साथ color stops, angles, positions adjust करें। Backgrounds, buttons, hero sections के लिए ready-to-use CSS मिलेगा।

ग्रेडिएंट जनरेटर का उपयोग कैसे करें

  1. Gradient type चुनें (Linear/Radial/Conic)।
  2. Colors और stop positions add करें।
  3. Angle/direction adjust करें।
  4. Live preview देखें।
  5. Generated CSS copy करें।

Gradient types

  • Linear — straight line transition (top→bottom)
  • Radial — circular (center → edges)
  • Conic — pie chart effect (rotation)
  • Multiple stops — complex multi-color blends

अक्सर पूछे जाने वाले प्रश्न

Linear और Radial gradient में क्या फर्क है?
Linear gradient straight line में colors transition करता है (top→bottom, left→right, etc.)। Radial gradient circular (केंद्र से बाहर)। Linear backgrounds, buttons के लिए। Radial spotlights, sunburst effects के लिए। Conic gradient pie chart effects के लिए।
Gradient में कितने colors हो सकते हैं?
Practically unlimited। Common: 2-3 colors। हर color को stop position (0%, 50%, 100%) दे सकते हैं। उदाहरण: linear-gradient(to right, red 0%, yellow 50%, blue 100%)। Subtle gradients के लिए close colors choose करें।
Browser support कैसा है?
Modern browsers (Chrome, Firefox, Safari, Edge) सब linear, radial, conic gradients support करते हैं। Old IE के लिए vendor prefixes (-webkit-, -moz-) generate होते हैं। यह tool clean modern syntax देता है — 99% users के लिए perfect।
Performance impact क्या है?
CSS gradients images से तेज़ हैं (कोई HTTP request नहीं, कोई file size नहीं)। GPU से render होते हैं — smooth। Background images replace करने का बेहतर तरीका। बहुत सारे gradients एक page पर performance पर असर डाल सकते हैं — measure करें।

संबंधित टूल्स