CSS ग्रेडिएंट संपूर्ण गाइड

ग्रेडिएंट आधुनिक वेब डिज़ाइन में सबसे अधिक उपयोग किए जाने वाले CSS इफेक्ट्स में से एक है। Instagram, Stripe, Spotify... सभी ग्रेडिएंट से अपनी ब्रांड पहचान व्यक्त करते हैं।

इस गाइड में, हम सभी प्रकार के CSS ग्रेडिएंट और कोड उदाहरणों के साथ व्यावहारिक अनुप्रयोगों का पता लगाएंगे।

---

ग्रेडिएंट बेसिक्स समझना

ग्रेडिएंट प्रकार

बुनियादी सिंटैक्स

.element {
  background: linear-gradient(direction, color1, color2, ...);
}

---

Linear Gradient: लीनियर ग्रेडिएंट

दिशा सेटिंग्स

/* कीवर्ड दिशा */
.to-right { background: linear-gradient(to right, #6366f1, #8b5cf6); }
.to-bottom { background: linear-gradient(to bottom, #6366f1, #8b5cf6); }
.to-top-right { background: linear-gradient(to top right, #6366f1, #8b5cf6); }

/* कोण दिशा */
.angle-45 { background: linear-gradient(45deg, #6366f1, #8b5cf6); }
.angle-90 { background: linear-gradient(90deg, #6366f1, #8b5cf6); }
.angle-180 { background: linear-gradient(180deg, #6366f1, #8b5cf6); }

दिशा कीवर्ड सारांश

कलर स्टॉप्स

/* समान वितरण (ऑटो) */
.auto {
  background: linear-gradient(#ff0000, #00ff00, #0000ff);
  /* 0%, 50%, 100% */
}

/* स्पष्ट स्थितियां */
.explicit {
  background: linear-gradient(
    #ff0000 0%,
    #ff0000 30%,    /* 0-30%: लाल रखें */
    #00ff00 30%,    /* 30% पर तीव्र ट्रांज़िशन */
    #00ff00 70%,    /* 30-70%: हरा रखें */
    #0000ff 70%     /* 70% पर तीव्र ट्रांज़िशन */
  );
}

/* हार्ड स्टॉप (तीव्र ट्रांज़िशन) */
.hard-stop {
  background: linear-gradient(
    #6366f1 50%,
    #8b5cf6 50%
  );
}

व्यावहारिक उदाहरण: ट्रेंडी ग्रेडिएंट

/* Instagram स्टाइल */
.instagram {
  background: linear-gradient(
    45deg,
    #f09433 0%,
    #e6683c 25%,
    #dc2743 50%,
    #cc2366 75%,
    #bc1888 100%
  );
}

/* Stripe स्टाइल */
.stripe {
  background: linear-gradient(
    135deg,
    #667eea 0%,
    #764ba2 100%
  );
}

/* ग्लासमॉर्फिज़्म बैकग्राउंड */
.glassmorphism {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0.05)
  );
  backdrop-filter: blur(10px);
}

---

Radial Gradient: रेडियल ग्रेडिएंट

बुनियादी सिंटैक्स

.radial {
  background: radial-gradient(shape size at position, color1, color2, ...);
}

आकार

/* वृत्त */
.circle {
  background: radial-gradient(circle, #6366f1, #8b5cf6);
}

/* दीर्घवृत्त (डिफ़ॉल्ट) */
.ellipse {
  background: radial-gradient(ellipse, #6366f1, #8b5cf6);
}

आकार

.size-demo {
  background: radial-gradient(circle closest-side at 30% 30%, #6366f1, #8b5cf6);
}

व्यावहारिक उदाहरण: स्पॉटलाइट इफेक्ट

.spotlight {
  background:
    radial-gradient(
      circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
      rgba(99, 102, 241, 0.3) 0%,
      transparent 50%
    ),
    #1a1a2e;
}

// माउस का अनुसरण करने वाला स्पॉटलाइट
document.addEventListener('mousemove', (e) => {
  const x = (e.clientX / window.innerWidth) * 100;
  const y = (e.clientY / window.innerHeight) * 100;
  document.documentElement.style.setProperty('--mouse-x', `${x}%`);
  document.documentElement.style.setProperty('--mouse-y', `${y}%`);
});

---

Conic Gradient: कोनिक ग्रेडिएंट

बुनियादी उदाहरण

/* कलर व्हील */
.color-wheel {
  background: conic-gradient(
    red, yellow, lime, aqua, blue, magenta, red
  );
  border-radius: 50%;
}

/* पाई चार्ट */
.pie-chart {
  background: conic-gradient(
    #6366f1 0deg 90deg,      /* 25% */
    #8b5cf6 90deg 180deg,    /* 25% */
    #a78bfa 180deg 270deg,   /* 25% */
    #c4b5fd 270deg 360deg    /* 25% */
  );
  border-radius: 50%;
}

व्यावहारिक उदाहरण: डोनट चार्ट

.donut-chart {
  background: conic-gradient(
    #6366f1 0deg 120deg,
    #8b5cf6 120deg 240deg,
    #a78bfa 240deg 360deg
  );
  border-radius: 50%;
  position: relative;
}

.donut-chart::after {
  content: '';
  position: absolute;
  inset: 25%;
  background: white;
  border-radius: 50%;
}

---

Repeating Gradients: दोहराव पैटर्न

दोहराव लीनियर

/* स्ट्राइप पैटर्न */
.stripes {
  background: repeating-linear-gradient(
    45deg,
    #6366f1,
    #6366f1 10px,
    #8b5cf6 10px,
    #8b5cf6 20px
  );
}

/* चेतावनी टेप */
.warning-tape {
  background: repeating-linear-gradient(
    45deg,
    #fbbf24,
    #fbbf24 20px,
    #1f2937 20px,
    #1f2937 40px
  );
}

---

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

पोज़िशन एनिमेशन

.animated-gradient {
  background: linear-gradient(
    270deg,
    #6366f1,
    #8b5cf6,
    #a78bfa,
    #c4b5fd
  );
  background-size: 400% 400%;
  animation: gradient-shift 15s ease infinite;
}

@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@property के साथ स्मूथ कलर ट्रांज़िशन

@property --gradient-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.smooth-rotate {
  --gradient-angle: 0deg;
  background: conic-gradient(
    from var(--gradient-angle),
    #6366f1, #8b5cf6, #6366f1
  );
  animation: rotate-gradient 3s linear infinite;
}

@keyframes rotate-gradient {
  to { --gradient-angle: 360deg; }
}

---

ग्रेडिएंट टेक्स्ट

बुनियादी कार्यान्वयन

.gradient-text {
  background: linear-gradient(90deg, #6366f1, #8b5cf6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

एनिमेटेड टेक्स्ट

.animated-text {
  background: linear-gradient(
    90deg,
    #6366f1,
    #8b5cf6,
    #a78bfa,
    #6366f1
  );
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: text-shine 3s linear infinite;
}

@keyframes text-shine {
  to { background-position: 300% 0; }
}

---

परफॉर्मेंस ऑप्टिमाइज़ेशन

GPU एक्सेलरेशन का उपयोग

/* transform के साथ एनिमेट करें */
.optimized {
  background: linear-gradient(45deg, #6366f1, #8b5cf6);
  transform: translateZ(0); /* GPU लेयर बनाएं */
}

---

FAQ

Q1: ग्रेडिएंट कलर चुनना मुश्किल है। कोई अनुशंसित संयोजन?

A: Gradient Generator पर लोकप्रिय ग्रेडिएंट प्रीसेट देखें। साथ ही, समान कलर फैमिलीज़ (पर्पल-ब्लू, ऑरेंज-पिंक) से शुरू करना प्राकृतिक दिखता है।

Q2: क्या ग्रेडिएंट IE में काम करते हैं?

A: IE11 linear-gradient और radial-gradient को सपोर्ट करता है, लेकिन conic-gradient को नहीं। 2026 तक, IE सपोर्ट काफी हद तक समाप्त हो गया है।

Q3: क्या ग्रेडिएंट बंडल साइज़ को प्रभावित करते हैं?

A: CSS ग्रेडिएंट इमेज से बहुत हल्के हैं। जटिल ग्रेडिएंट भी CSS की कुछ पंक्तियों में व्यक्त होते हैं, बंडल साइज़ पर न्यूनतम प्रभाव के साथ।

Q4: ग्रेडिएंट ट्रांसपेरेंसी कैसे सेट करें?

A: rgba() या hsla() का उपयोग करें।

background: linear-gradient(rgba(99, 102, 241, 0.5), rgba(139, 92, 246, 0.5));

Q5: मेरा ग्रेडिएंट एनिमेशन रुक-रुक कर चल रहा है।

A: background-position एनिमेशन के बजाय, @property के साथ CSS वेरिएबल्स को एनिमेट करना अधिक स्मूथ है। या filter: hue-rotate() का उपयोग करें।

---

निष्कर्ष

CSS ग्रेडिएंट मुख्य बिंदु:

1. Linear: दिशा + कलर स्टॉप्स
2. Radial: आकार + साइज़ + स्थिति
3. Conic: रोटेशन कोण + स्थिति
4. मल्टीपल लेयर्स: कॉमा से अलग, ऊपर से नीचे स्टैक
5. एनिमेशन: background-position या @property

---

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