मुफ़्त ग्रेडिएंट वॉलपेपर जनरेटर
कस्टम ग्रेडिएंट वॉलपेपर बनाएँ और डाउनलोड करें।
ग्रेडिएंट के बारे में
CSS ग्रेडिएंट छवियों के बिना चिकने रंग संक्रमण बनाने देते हैं, जो फ़ाइल आकार कम करता है और प्रदर्शन में सुधार करता है।
अक्सर पूछे जाने वाले प्रश्न
linear, radial और conic ग्रेडिएंट में क्या अंतर है?
Linear ग्रेडिएंट एक निर्दिष्ट कोण पर सीधी रेखा में बहते हैं। Radial ग्रेडिएंट एक केंद्रीय बिंदु से विकिरण करते हैं। Conic ग्रेडिएंट एक केंद्रीय बिंदु के चारों ओर रंग पहिये की तरह घूमते हैं। प्रत्येक एक अलग दृश्य प्रभाव उत्पन्न करता है।
क्या मैं अपनी साइट पर CSS ग्रेडिएंट का उपयोग कर सकता हूँ?
हाँ! CSS ग्रेडिएंट सभी आधुनिक ब्राउज़रों द्वारा समर्थित हैं और छवियों की आवश्यकता नहीं है। वे किसी भी आकार में स्केल करते हैं, तेज़ी से लोड होते हैं और किसी भी स्क्रीन पर कुरकुरे रहते हैं। इस टूल द्वारा उत्पन्न CSS को अपनी स्टाइलशीट में कॉपी करें।
मेरे डिवाइस के अनुसार सबसे अच्छे रिज़ॉल्यूशन कौन से हैं?
डेस्कटॉप मॉनिटर आमतौर पर 1920×1080 का उपयोग करते हैं, लैपटॉप भिन्न होते हैं, 4K स्क्रीन 3840×2160 का उपयोग करती हैं, iPhone 1080×1920 का और iPad 2048×2732 का। पूरी तरह से कुरकुरे वॉलपेपर के लिए अपने डिवाइस से मेल खाने वाला रिज़ॉल्यूशन चुनें।
Web पर Gradients, एक short history
Gradients का print और airbrush में एक long pre-digital history है। «Gradient» की vocabulary, one colour से दूसरे की smooth ramp के रूप में, directly late nineteenth century के chromolithography और airbrush poster art से आती है; Bauhaus design students ने 1920s में tonal-ramp exercises drill किए, किसी pixel के इसे screen पर push करने से बहुत पहले।
Digital gradients 1990s की शुरुआत में दो adjacent moments में arrive हुए। Adobe Photoshop 1.0 (February 1990) ने day one से gradient tool ship किया, एक «blend» algorithm जो foreground और background swatches के बीच linear और radial fall-off के साथ interpolate करता था। Adobe PostScript Level 2 (1991) ने shading patterns को first-class language feature के रूप में introduce किया; तब तक, PostScript Level 1 के पास gradient को natively describe करने का कोई तरीका नहीं था और इसे incremental greys की banded fills से fake करना पड़ता था। PostScript Level 3 (1997) ने Type 6 (Coons patch) और Type 7 (tensor-product) mesh shadings add किए जिन्होंने late-1990s magazine industry में हर printed gradient को power किया। Adobe Illustrator का mesh-gradient tool version 8 (1998) में follow किया।
Web पर CSS gradients उससे late arrive हुए जितना लोग याद रखते हैं। WebKit का -webkit-gradient() Safari 4 और Chrome 1 में 2008 में अपने verbose syntax के साथ ship हुआ। Mozilla का -moz-linear-gradient() Firefox 3.6 (January 2010) में follow किया, वह syntax use करते हुए जो eventually standard बनेगा। Unprefixed linear-gradient() और radial-gradient() April 2012 में W3C Candidate Recommendation तक पहुंचे और around 2013 से widely usable थे। conic-gradient() बहुत newer है, Chrome 69 में September 2018 (flag के पीछे), Chrome 75 में unflagged (June 2019), Firefox 83 (November 2020)। यह अब हर modern browser में Baseline-available है।
Skeuomorphic, फिर flat, फिर gradient again
Gradients late-1990s और early-2000s web design की visual language बन गए, Apple Aqua interface (2000) के glassy, beveled, reflective Web 2.0 buttons essentially nested gradients थे जिनमें soft body fade के ऊपर sharp inner highlight था। Flat-design movement Microsoft के Metro (Windows Phone 7, 2010) और Apple के iOS 7 (2013) के around crystallise हुआ, gradient-heavy skeuomorphism के against react करते हुए UI से हर shadow, bevel और blend strip कर दिया। Roughly पांच साल (2013-2018) के लिए, gradients unfashionable थे।
2017 के बाद से pendulum hard back swing हुआ। Stripe का animated multi-colour mesh gradient उसके homepage पर उस template का template set किया जो पूरी SaaS industry ने copy किया। Instagram के 2016 logo rebrand ने flat camera को saturated pink-orange-purple gradient से replace किया (1980s photography logos की deliberate echo)। Decade के अंत तक, gradients फिर से ubiquitous थे, लेकिन नई vocabulary के साथ: meshes, blurred blobs, OKLCH-smooth, accessibility-aware। Tailwind CSS 4 (January 2025) ने hue-interpolation hints सहित conic gradients के एक curated set of default gradient utilities ship किए।
एक screen में CSS gradient syntax
सभी तीन CSS gradient functions एक list of colour stops और एक direction लेते हैं:
linear-gradient(angle, colors…): CSS में angle compass-bearing convention use करता है:0degऊपर point करता है (पहला colour नीचे),90degright point करता है,180degनीचे point करता है (default),270degleft point करता है। Note करें कि यह mathematical polar angle के opposite है। आप keywords भी use कर सकते हैं:to top rightangle इस तरह compute करता है कि gradient line diagonal से होकर जाए, non-square box पर 135° gradient से same नहीं।radial-gradient(shape size at position, colors…): colours centre point से outward sweep करते हैं।circleयाellipse; size keywordsclosest-side,farthest-corner; position defaults to centre।conic-gradient(from angle at position, colors…): colours centre के around clockwise rotate करते हैं, colour wheel की तरह। Pie charts, sweep effects, और «donut chart» look के लिए useful। सभी तीनों के repeating variants (repeating-linear-gradientआदि) colour stops को infinitely tile करते हैं।
Hard stops (दो colour stops को same percentage पर रखना) smooth blends की बजाय sharp bands create करते हैं: linear-gradient(red 0%, red 50%, blue 50%, blue 100%) two-colour split है, gradient नहीं। Stripes, section colour वाले cards, या pseudo-borders के लिए useful।
OKLCH Revolution, और muddy-grey midpoint
Default sRGB interpolation में pure red #ff0000 से pure green #00ff00 तक gradient around #7f7f00 पर एक desaturated, muddy yellow-brown से होकर गुज़रता है। ऐसा इसलिए होता है क्योंकि sRGB linear interpolation midpoint पर दोनों R और G channels को reduce करता है, और हमारी आँखें midpoint को दोनों endpoints से बहुत darker और less saturated perceive करती हैं। Classic web-design pain point।
CSS Color Module Level 4 ने perceptually-uniform colour spaces और उनमें gradients interpolate करने की ability add की: linear-gradient(in oklch, red, green)। OKLCH (और उसका sibling OKLab), Björn Ottosson द्वारा December 2020 में design किया गया, lightness, chroma और hue को separate करता है ताकि hue axis के साथ interpolating colour wheel के short way से गुज़रे, throughout saturation preserve करे। OKLCH में same red-to-green gradient midpoint पर vivid yellow से होकर गुज़रता है।
General rule:
- दो analogous hues (red to orange, blue to purple): sRGB और OKLCH similar दिखते हैं; usually fine।
- दो complementary hues (red to green, blue to orange): sRGB muddy grey produce करता है, OKLCH vivid hue sweep produce करता है। OKLCH decisively जीतता है।
- White या black पर एक colour: sRGB midpoint पर dingy दिखता है; OKLCH perceived lightness को smoothly changing रखता है।
- Similar lightness के दो desaturated colours: minimal difference।
Browser support: gradients के लिए interpolation-method Safari 16.2 (December 2022), Chrome 111 (March 2023), और Firefox 113 (May 2023) में ship हुई, अब Baseline Widely Available।
Resolution presets) सही pixel count चुनें
Screen से छोटा wallpaper stretch होता है और soft दिखता है; बहुत बड़ा file size और memory waste करता है। 2026 में common targets:
| Resolution | सामान्य नाम | कहां |
|---|---|---|
| 1920×1080 | Full HD / 1080p | 2026 में सबसे common laptop और desktop |
| 2560×1440 | QHD / 2K | Mainstream gaming और creator monitors |
| 3440×1440 | UWQHD अल्ट्रावाइड | वक्र 21:9 ultrawide monitors |
| 3840×2160 | 4K / UHD | High-end desktops और Apple Studio Display |
| 5120×2880 | 5K | Apple iMac Retina, Studio Display |
| 1080×1920 | फ़ोन portrait | Generic FHD Android आधार रेखा |
| 1170×2532 / 1290×2796 | आधुनिक iPhone | iPhone 13-16 परिवार at 19.5:9 |
| 2048×2732 | iPad Pro 12.9'' | 4:3 tablets |
इसे कब Use करें
- Personal device wallpapers: desktop, lock screen, home screen, यहां तक कि smartwatch face background।
- Video conferencing virtual backgrounds। Solid gradients busy photos की तुलना में Zoom/Teams/Meet auto-segmentation के लिए easier होते हैं, ये speaker के around «halo» artefact कम करते हैं।
- Social media headers: Twitter/X 1500×500, LinkedIn 1584×396, YouTube channel banner 2560×1440 (safe-area considerations के साथ), Instagram Stories 1080×1920।
- Brand identity gradients। Stripe का purple-blue mesh, Instagram का pink-orange-purple, Spotify का lime-to-dark green, Slack का purple-pink, सभी brand-defining gradients के real-world examples।
- Hero sections web pages पर) CSS gradients usually directly
background-imageके माध्यम से apply होते हैं, लेकिन emails के लिए PNG fallback useful है (अधिकांश email clients अभी भी CSS gradients reliably render नहीं करते) औरoklchinterpolation के बिना browsers के लिए। - Empty states, loading skeletons, dashboard cards: UI surfaces जो distracting हुए बिना gentle visual interest से benefit करती हैं।
- Print और merch। 300 DPI पर 4K wallpaper roughly 12 × 18 inch poster cover करता है।
Accessibility: Gradients के ऊपर Text
Gradient backgrounds के साथ सबसे common practical mistake किसी भी overlaid text के लिए contrast fail करना है। WCAG 2.2 SC 1.4.3 (Contrast Minimum, Level AA) body text के लिए 4.5:1 और large text (18 pt regular या 14 pt bold) के लिए 3:1 require करता है। WCAG solid backgrounds के लिए लिखा गया था; gradient के साथ, text के नीचे हर point पर contrast ratio मायने रखता है, worst point ही count होता है।
जब आप gradient पर text रखते हैं तो practical fixes: text के नीचे semi-transparent black या white scrim add करें, text के नीचे gradient को narrow lightness range तक constrain करें, या fallback के रूप में strong text-shadow use करें। Vertical gradients (top-dark, bottom-light) generally diagonal से ज़्यादा text-friendly होते हैं, left-to-right flow करने वाला text हर line पर constant background lightness encounter करता है; long text block के नीचे 45° gradient हर line को lightness range traverse करने के लिए force करता है, जिससे consistent contrast बहुत harder हो जाता है।
अधिक Questions
मेरे gradient में visible bands क्यों हैं?
दो usual causes। First, JPEG compression: JPEG का DCT-based encoding smooth tonal ramps पर visible «blocking» produce करता है, खासकर low-saturation regions में। बजाय इसके PNG या WebP-lossless के रूप में save करें। Second, 8-bit-per-channel colour depth: दो close colours के बीच 8-bit gradient में केवल कुछ distinct tonal steps होते हैं और आँख कभी-कभी इन्हें resolve कर सकती है। Subtle noise/dither overlay (1-2% noise) add करने से natural variation add करके bands break up होते हैं; अधिकांश high-end design tools यह automatically करते हैं।
Desktop wallpaper के लिए linear, radial, या conic use करूं?
अधिकांश wallpapers के लिए, slight diagonal पर linear (around 135°) या off-screen centred radial best दिखता है, ये distraction के बिना asymmetry create करते हैं। Conic gradients striking होते हैं लेकिन ambient backdrop की बजाय «designed-by-a-designer» के रूप में read होते हैं, इसलिए ये उन wallpapers की तुलना में accent surfaces (album art, social posts) के लिए better हैं जिन्हें आप दिन में आठ घंटे देखते रहते हैं। Mesh gradients (multiple overlapping radial gradients) most modern look हैं लेकिन या तो JS library या generated image चाहते हैं, low saturation पर दो complementary hues वाला single radial gradient एक good approximation है।
कौन से colour combinations best दिखते हैं?
तीन reliable patterns: analogous (wheel पर adjacent दो colours (purple to blue, orange to red)) calm और harmonious read होता है; monochromatic (same hue, varying lightness) «classic Stripe blue») branded और subtle read होता है; triadic-plus-OKLCH (perceptual space में interpolated तीन या चार equally-spaced colours) modern Stripe / Instagram look देता है। दो pure complementary colours (red/green, blue/orange) avoid करें unless आप explicitly oklch() interpolation use कर रहे हों, sRGB आपको muddy midpoint देगा।
क्या कुछ server पर भेजा जाता है?
नहीं। Gradient आपके browser में <canvas> पर render होता है, PNG canvas.toDataURL() के माध्यम से export होता है, और CSS string locally JavaScript द्वारा generate होती है। आपके colour choices, dimensions, या resulting image के बारे में कुछ भी page से नहीं जाता।