CSS Gradient Generator

CSS Gradient क्या है?

CSS Gradient Generator एक दृश्य उपकरण है जो आपको gradient सिंटैक्स हाथ से लिखे बिना रंगों के बीच सहज संक्रमण बनाने में सहायता करता है। CSS में, ग्रेडिएंट दो या अधिक रंगों के बीच एक सहज संक्रमण है, जिसे ब्राउज़र किसी भी छवि फ़ाइल के बिना सीधे प्रस्तुत करता है। CSS Image Module Level 4 विनिर्देश ग्रेडिएंट फ़ंक्शनों को एक प्रकार के image मान के रूप में परिभाषित करता है, जिसका अर्थ है कि वे वहाँ भी उपयोग हो सकते हैं जहाँ background-image, list-style-image, या border-image मान स्वीकार्य हों। चूँकि ब्राउज़र रेंडर के समय ग्रेडिएंट को rasterize करता है, वे किसी भी रेज़ोल्यूशन पर सटीक दिखते हैं और हाई-DPI स्क्रीन पर कभी धुंधले नहीं होते। CSS Gradient Generator का उपयोग समय बचाता है और अनुमान लगाने की आवश्यकता समाप्त करता है — आप रंग और स्थान दृश्यमान रूप से समायोजित करते हैं, फिर तैयार CSS नियम कॉपी करते हैं।

CSS तीन मुख्य ग्रेडिएंट आकारों का समर्थन करता है: linear (एक सीधी रेखा के अनुदिश), radial (एक केंद्र बिंदु से बाहर की ओर), और conic (एक केंद्र बिंदु के चारों ओर घुमाव)। प्रत्येक आकार रंग स्टॉप की सूची स्वीकार करता है, जहाँ आप रंग और वैकल्पिक रूप से स्थान (प्रतिशत या लंबाई) निर्दिष्ट करते हैं। ब्राउज़र डिफ़ॉल्ट रूप से sRGB रंग स्थान का उपयोग करके स्टॉप के बीच रंगों को interpolate करता है, हालाँकि CSS Color Level 4 oklch और lab जैसे अन्य रंग स्थानों को निर्दिष्ट करने की अनुमति देता है, जो देखने में ज़्यादा smooth संक्रमण प्रदान करते हैं।

ग्रेडिएंट, वेब पर अधिकांश सजावटी उद्देश्यों के लिए छवि-आधारित पृष्ठभूमि का स्थान लेते हैं। एक CSS नियम वह उत्पन्न करता है जिसके लिए पहले Photoshop निर्यात और HTTP अनुरोध की आवश्यकता होती थी। वे रेज़ोल्यूशन-स्वतंत्र हैं, CSS के अतिरिक्त कोई नेटवर्क बैंडविड्थ नहीं लेते, और मानक CSS गुणों के साथ animate या transition किए जा सकते हैं। 2013 से सभी प्रमुख ब्राउज़रों में ग्रेडिएंट सिंटैक्स स्थिर है, और prefix-रहित रूप Chrome, Firefox, Safari, और Edge में बिना किसी fallback के कार्य करता है।

यह CSS Gradient Generator क्यों उपयोग करें?

ग्रेडिएंट सिंटैक्स हाथ से लिखने का अर्थ है स्टॉप स्थानों का अनुमान लगाना, कोण मानों की जाँच करना, और परिणाम देखने के लिए बार-बार पेज पुनः लोड करना। एक दृश्य निर्माता आपको ग्रेडिएंट बनाते समय ही देखने देता है, स्टॉप को खींचकर समायोजित करने देता है, और सही दिखने पर अंतिम CSS कॉपी करने देता है।

CSS Gradient Generator के उपयोग के मामले

CSS Gradient प्रकार संदर्भ

CSS पाँच gradient फ़ंक्शन परिभाषित करता है। तीन प्राथमिक प्रकार (linear, radial, conic) में से प्रत्येक का एक repeating संस्करण है जो पैटर्न को दोहराता है। repeating-linear-gradient() और repeating-radial-gradient() धारीदार पृष्ठभूमि और concentric rings के लिए उपयोगी हैं। सभी gradient फ़ंक्शन किसी भी CSS रंग प्रारूप में रंग स्टॉप स्वीकार करते हैं: HEX, RGB, HSL, नामित रंग, या oklch। पाँचों फ़ंक्शन के लिए Chrome, Firefox, Safari, और Edge में ब्राउज़र समर्थन व्यावहारिक रूप से सार्वभौमिक है — किसी vendor prefix की आवश्यकता नहीं है।

Linear बनाम Radial बनाम Conic Gradients

प्रत्येक gradient प्रकार रंगों को ज्यामिति से भिन्न रूप से मैप करता है। सही प्रकार का चुनाव आपको आवश्यक दृश्य प्रभाव पर निर्भर करता है, न कि उनके बीच गुणवत्ता के अंतर पर। अधिकांश पेज पृष्ठभूमि और section विभाजकों के लिए, linear gradient सही डिफ़ॉल्ट है — यह सबसे सरल है और विभिन्न आकार के तत्वों पर सबसे अनुमानित है। Radial और conic ग्रेडिएंट विशिष्ट दृश्य प्रभावों के लिए बेहतर हैं जहाँ वृत्ताकार या घूर्णन ज्यामिति अर्थपूर्ण हो।

कोड उदाहरण

JavaScript, Python, CSS और Go में CSS ग्रेडिएंट को programmatically उत्पन्न करने और लागू करने के उदाहरण। प्रत्येक वैध CSS gradient स्ट्रिंग उत्पन्न करता है जिसे आप stylesheets या inline styles में सीधे उपयोग कर सकते हैं।

// Generate a CSS linear-gradient string from an array of stops
function buildGradient(angle, stops) {
  const parts = stops.map(s => `${s.color} ${s.position}%`)
  return `linear-gradient(${angle}deg, ${parts.join(', ')})`
}

const stops = [
  { color: '#6366f1', position: 0 },
  { color: '#ec4899', position: 50 },
  { color: '#f59e0b', position: 100 },
]
buildGradient(90, stops)
// -> "linear-gradient(90deg, #6366f1 0%, #ec4899 50%, #f59e0b 100%)"

// Apply to an element
document.querySelector('.hero').style.background = buildGradient(135, stops)

# Generate a CSS gradient string for use in templates or SVGs
def build_gradient(angle: int, stops: list[tuple[str, int]]) -> str:
    parts = [f"{color} {pos}%" for color, pos in stops]
    return f"linear-gradient({angle}deg, {', '.join(parts)})"

stops = [("#6366f1", 0), ("#ec4899", 50), ("#f59e0b", 100)]
print(build_gradient(135, stops))
# -> "linear-gradient(135deg, #6366f1 0%, #ec4899 50%, #f59e0b 100%)"

# Interpolate N colors between two endpoints
def interpolate_hex(c1: str, c2: str, steps: int) -> list[str]:
    r1, g1, b1 = int(c1[1:3], 16), int(c1[3:5], 16), int(c1[5:7], 16)
    r2, g2, b2 = int(c2[1:3], 16), int(c2[3:5], 16), int(c2[5:7], 16)
    return [
        f"#{int(r1+(r2-r1)*i/(steps-1)):02x}"
        f"{int(g1+(g2-g1)*i/(steps-1)):02x}"
        f"{int(b1+(b2-b1)*i/(steps-1)):02x}"
        for i in range(steps)
    ]

interpolate_hex("#6366f1", "#f59e0b", 4)
# -> ['#6366f1', '#9a7399', '#d18042', '#f59e0b']

/* Linear gradient — left to right */
.hero {
  background: linear-gradient(90deg, #6366f1 0%, #ec4899 50%, #f59e0b 100%);
}

/* Radial gradient — circular spotlight */
.badge {
  background: radial-gradient(circle at 30% 30%, #6366f1, #312e81);
}

/* Conic gradient — color wheel */
.wheel {
  background: conic-gradient(from 0deg, #ef4444, #f59e0b, #22c55e, #3b82f6, #8b5cf6, #ef4444);
  border-radius: 50%;
}

/* Multi-stop with transparency */
.overlay {
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.6) 60%,
    rgba(0, 0, 0, 0.9) 100%
  );
}

/* Repeating stripes */
.stripes {
  background: repeating-linear-gradient(
    45deg,
    #6366f1 0 10px,
    transparent 10px 20px
  );
}

package main

import "fmt"

// Stop represents one color stop in a gradient.
type Stop struct {
	Color    string
	Position int // percent 0-100
}

func buildGradient(angle int, stops []Stop) string {
	result := fmt.Sprintf("linear-gradient(%ddeg", angle)
	for _, s := range stops {
		result += fmt.Sprintf(", %s %d%%", s.Color, s.Position)
	}
	return result + ")"
}

func main() {
	stops := []Stop{
		{"#6366f1", 0},
		{"#ec4899", 50},
		{"#f59e0b", 100},
	}
	fmt.Println(buildGradient(135, stops))
	// -> "linear-gradient(135deg, #6366f1 0%, #ec4899 50%, #f59e0b 100%)"
}

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