Handytool
डेवलपरमुफ़्तस्थानीय रूप से चलता है

CSS gradient generator

Linear, radial, और conic CSS gradients build करें — stops को ड्रैग करें, colors pick करें, CSS copy करें।

प्रीव्यू
CSS
background: linear-gradient(135deg, #B7FF3E 0%, #0a0a0a 100%);
प्रकार
Presets

छह तक color stops जोड़ें, position slider को ड्रैग करें, और CSS कॉपी करें।

CSS gradient generator के बारे में

Handytool का CSS gradient generator linear, radial, और conic gradients को छह तक color stops के साथ build करता है। एक stop की position को ड्रैग करें, इसका color बदलें, gradient type को switch करें, और live preview और CSS declaration instantly update होते हैं। Built-in presets में से एक से शुरू करें — Lime Swiss, Sunset, Sky, Aurora — या scratch से अपना design करें।

CSS gradient generator की विशेषताएँ

  • 01

    Linear, radial, और conic

    Linear हर रोज़ background gradient है; radial highlights और vignettes के लिए बढ़िया है; conic pie charts, color wheels, और rotating backgrounds के लिए perfect है।

  • 02

    छह तक color stops

    Stops add और remove करें, हर एक की position को एक slider से set करें, और एक system color picker या एक hex value के via इसका color pick करें। Stops automatically position द्वारा re-sort होते हैं।

  • 03

    Copyable CSS declaration

    आउटपुट एक complete background: ... declaration है जिसे आप सीधे एक stylesheet, एक styled component, या एक Tailwind arbitrary-value class में paste कर सकते हैं।

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

Linear, radial, और conic के बीच क्या अंतर है?
Linear gradients एक straight line में एक दिए गए angle पर चलते हैं; radial gradients एक center से outwards फैलते हैं; conic gradients एक point के चारों ओर एक घड़ी की सुई की तरह sweep करते हैं। हर एक एक different visual effect के लिए suit करता है।
मुझे कितने color stops का उपयोग करना चाहिए?
दो stops classic two-color gradient है। तीन या चार आपको realistic transitions (sunset, aurora) create करने देता है। छह से अधिक noisy दिखता है — यही कारण है कि यह generator छह पर cap करता है।
क्या मैं इसे एक email template में backgrounds के लिए उपयोग कर सकता हूँ?
अधिकांश email clients अभी भी modern CSS gradients को reliably support नहीं करते — यदि आप इसे एक email template में copy करते हैं तो background gradient के addition में एक solid fallback color provide करें।
क्या आउटपुट pixel-accurate है?
हाँ — preview browser के native gradient engine द्वारा render होता है, इसलिए जो आप देखते हैं वह है जो आपकी CSS produce करेगी।

संबंधित टूल

डेवलपर →

अन्य टूल्स देखें

सभी टूल →