CSS ग्रेडिएंट गाइड: Linear, Radial, और Conic ग्रेडिएंट

CSS ग्रेडिएंट आपको एक भी image request के बिना, directly browser में दो या अधिक colors के बीच smooth transitions बनाने देते हैं। CSS3 में introduce किए गए और अब universally supported, ग्रेडिएंट simple two-stop fades से sophisticated visual elements में विकसित हुए हैं जो textures, geometric patterns और dimensional effects produce करने में capable हैं।

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

CSS ग्रेडिएंट एक special type की <image> value है। यह programmatically एक color transition generate करती है। क्योंकि ग्रेडिएंट images हैं, आप उन्हें background-image या shorthand background property के साथ लागू करते हैं — background-color से नहीं।

CSS में तीन gradient types हैं:

• linear-gradient() — colors एक straight line के साथ transition करते हैं
• radial-gradient() — colors एक central point से outward radiate करते हैं
• conic-gradient() — colors एक central point के चारों ओर rotate करते हैं

Linear ग्रेडिएंट

एक linear gradient एक specified angle पर एक straight line के साथ color transition खींचती है।

Basic Syntax

background: linear-gradient(direction, color-stop1, color-stop2, ...);

/* Top to bottom (default) */
background: linear-gradient(#3B82F6, #1E3A8A);

/* Left to right */
background: linear-gradient(to right, #3B82F6, #1E3A8A);

/* Diagonal */
background: linear-gradient(to bottom right, #3B82F6, #1E3A8A);

Angle Syntax

Angles elements के top से clockwise degrees में measured होते हैं।

/* 45-degree diagonal */
background: linear-gradient(45deg, #FF6B6B, #FFC300);

/* 135-degree diagonal */
background: linear-gradient(135deg, #667EEA, #764BA2);

#667EEA से #764BA2 तक 135 degrees पर एक gradient white text के पीछे अच्छा काम करने वाला cool purple diagonal produce करती है।

Multiple Color Stops

Color stops परिभाषित करते हैं कि प्रत्येक color gradient line के साथ कहाँ शुरू और खत्म होता है:

/* तीन-stop gradient */
background: linear-gradient(to right, #FF6B6B, #FFD93D, #6BCB77);

/* Positioned stops */
background: linear-gradient(to right,
  #FF6B6B 0%,
  #FFD93D 50%,
  #6BCB77 100%
);

/* Hard color stop (कोई transition नहीं) */
background: linear-gradient(to right,
  #FF6B6B 0%,
  #FF6B6B 50%,
  #6BCB77 50%,
  #6BCB77 100%
);

Radial ग्रेडिएंट

एक radial gradient एक center point से outward emanate होती है, circular या elliptical patterns बनाती है।

background: radial-gradient(shape size at position, color-stop1, color-stop2);

/* Simple center radial */
background: radial-gradient(#FFF176, #F57F17);

/* Explicit circle */
background: radial-gradient(circle, #A8E063, #2D6A4F);

Off-center Gradient

/* Lighting effect के लिए Off-center gradient */
background: radial-gradient(circle at 70% 30%, #FFE066, #FF6B6B, #2D3561);

Conic ग्रेडिएंट

एक conic gradient colors को एक central point के चारों ओर rotate करती है, जैसे एक pie chart खींचा जाता है।

/* Basic conic gradient */
background: conic-gradient(#FF6B6B, #FFD93D, #6BCB77, #4D96FF, #FF6B6B);

Conic ग्रेडिएंट के साथ Pie Charts

/* Pie chart: 40% red, 35% blue, 25% green */
background: conic-gradient(
  #EF4444 0deg 144deg,
  #3B82F6 144deg 270deg,
  #22C55E 270deg 360deg
);
border-radius: 50%;

Conic ग्रेडिएंट के साथ Color Wheels

background: conic-gradient(
  hsl(0, 100%, 50%),
  hsl(60, 100%, 50%),
  hsl(120, 100%, 50%),
  hsl(180, 100%, 50%),
  hsl(240, 100%, 50%),
  hsl(300, 100%, 50%),
  hsl(360, 100%, 50%)
);
border-radius: 50%;

ग्रेडिएंट में Transparency

Gradients में rgba() values fade-in और fade-out effects बनाती हैं:

/* Bottom पर fade out */
background: linear-gradient(to bottom,
  #1E3A8A 0%,
  rgba(30, 58, 138, 0) 100%
);

ध्यान दें: transparent CSS में rgba(0,0,0,0) है — fully transparent black — जो unexpected gray bands produce कर सकता है। इसके बजाय अपने color का fully-transparent version उपयोग करें:

/* Correct: blue का transparent version */
background: linear-gradient(to right, #3B82F6, rgba(59, 130, 246, 0));

Gradient Generator का उपयोग करना

जबकि gradients को hand से लिखना syntax समझने के लिए valuable है, Gradient Generator प्रक्रिया को significantly accelerate करता है। आप:

• Visual color picker या hex codes directly enter करके start और end colors pick कर सकते हैं
• Gradient angle slider या numeric input से set कर सकते हैं
• Precise positions पर multiple color stops जोड़ सकते हैं
• Finished CSS को एक click से copy कर सकते हैं

Practical Gradient Recipes

Hero Section Background

background: linear-gradient(135deg, #667EEA 0%, #764BA2 100%);

Card Hover Effect

background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);

Neon Glow Button

background: linear-gradient(to right, #11998e, #38ef7d);
box-shadow: 0 4px 15px rgba(56, 239, 125, 0.4);

Dark Mode Surface

background: linear-gradient(145deg, #1E1E2E 0%, #2D2D44 100%);

मुख्य निष्कर्ष

• CSS तीन gradient types प्रदान करता है: linear-gradient(), radial-gradient(), और conic-gradient()।
• प्रत्येक type का एक repeating-* variant है जो gradient pattern tile करता है।
• Multiple color stops percentage या pixel positions के साथ control देते हैं।
• rgba() का zero alpha उपयोग करें (bare transparent keyword नहीं) जब एक color को transparency में fade करें।
• Multiple gradients एक single background declaration में layered हो सकते हैं।
• Gradient Generator आपको complex gradients visually build करने देता है, real-time preview और one-click CSS export के साथ।