CSS Gradient Generator

यह किसके लिए है?

CSS gradients CSS की एक single line हैं जो backgrounds, buttons, hero panels और overlays के लिए smooth color transitions draw करती है — बिना किसी image asset के। Syntax powerful है पर हाथ से लिखना झंझट है: angles, percentage stops, repeating variants, linear को radial के साथ mix करना। यह tool एक visual builder देता है जो CSS को real time में mirror करता है, इसलिए आप एक stop को जगह पर drag कर सकते हैं और exact linear-gradient(...) या radial-gradient(...) string copy कर सकते हैं।

कब इस्तेमाल करें

• Hero या call-to-action section background बनाना बिना image में burn किए।
• Button या card hover states बनाना जो image asset के बिना "modern" दिखें।
• Brand-coloured overlay mock करना (gradient + low-opacity solid text की legibility के लिए)।
• Decorative dividers, mesh-style backgrounds, या animated SVG fills generate करना।

Linear बनाम radial

• Linear — colors चुने हुए angle पर एक straight line के along transition करते हैं (0° = bottom-to-top, 90° = left-to-right, 180° = top-to-bottom)।
• Radial — colors एक center point से circle या ellipse के रूप में बाहर फैलते हैं। Spotlight या vignette effects के लिए बढ़िया।

आम गलतियाँ

• background के रूप में इस्तेमाल करें, background-color के रूप में नहीं। Gradients images हैं, colors नहीं। background-color ignore हो जाता है।
• Stops order में होने चाहिए predictable rendering के लिए। यह tool उन्हें automatically sort कर देता है — अगर आप CSS copy करके हाथ से edit करते हैं, तो percentages को monotonic रखें।
• Hard stops (एक ही percentage पर दो stops) fade के बजाय एक sharp boundary बनाते हैं — striped या band effects के लिए उपयोगी।
• बड़े area पर banding। Long, low-contrast gradients 8-bit screens पर दिखाई देने वाली "bands" दिखा सकती हैं। एक छोटा SVG noise overlay जोड़ें (filter: url(#noise)) या stops को थोड़ा move करें।
• Performance। Browsers gradients को जल्दी paint करते हैं, पर background-image को animate करना हर frame पर paint trigger करता है — इसके बजाय ऊपर के एक layer पर transform animate करें।
• Accessibility। अगर text gradient पर है, तो contrast ratio को gradient के साथ सबसे खराब point पर check करें जहाँ text दिखता है, average पर नहीं।