DevTulz Online

CSS ग्रेडिएंट जनरेटर

रंग थांबे

CSS ग्रेडिएंट म्हणजे काय?

CSS ग्रेडिएंट तुम्हाला इमेज फाइल्सशिवाय दोन किंवा अधिक रंगांमध्ये मृदू संक्रमणे दाखवण्याची परवानगी देतात. ते तीन प्रकारांत येतात: linear-gradient (सरळ रेषेने), radial-gradient (मध्यवर्ती बिंदूपासून बाहेर पसरणारे), आणि conic-gradient (मध्यवर्ती बिंदूभोवती फिरणारे). ग्रेडिएंट पार्श्वभूमी, बटणे, ओव्हरले आणि सजावटीच्या घटकांसाठी वापरले जातात.

CSS ग्रेडिएंट जनरेटर कसे वापरावे

  1. स्वॉचेसमधून प्रीसेट निवडा किंवा स्वतःचे ग्रेडिएंट कॉन्फिगर करा.

  2. ग्रेडिएंट प्रकार निवडा: linear, radial किंवा conic.

  3. कोन (linear/conic साठी) किंवा आकार (radial साठी) समायोजित करा.

  4. रंग थांबे संपादित करा — रंग आणि स्थान (0–100%) बदला.

  5. आवश्यकतेनुसार रंग थांबे जोडा किंवा काढा.

  6. CSS कॉपी करा आणि आपल्या स्टाइलशीटमध्ये पेस्ट करा.

वारंवार विचारले जाणारे प्रश्न

मी एक पारदर्शक ग्रेडिएंट कसे बनू? पूर्ण पारदर्शकतेसाठी alpha चॅनेल 0 सह rgba() किंवा hsla() रंग मूल्ये वापरा. उदाहरणार्थ, rgba(0,0,0,0) ची रंग थांबवा पूर्णपणे पारदर्शक काळा आहे, जो प्रतिमांवर fade-out overlays साठी उपयोगी आहे.

मी कठोर रंग थांबवा कसे तयार करू? समान स्थितीवर दोन रंग थांबवा ठेवा — एक समाप्त होणारा आणि एक त्या बिंदूवर सुरू होणारा. उदाहरणार्थ, red 50%, blue 50% मध्यबिंदूवर कोणतीही ग्रेडिएंट संक्रमण नाहीच red ते blue तर तात्काळ स्विच तयार करते.

कोणते ब्राउजर conic gradients समर्थन करतात? Conic gradients सर्व आधुनिक ब्राउजरमध्ये समर्थित आहेत (Chrome 69+, Firefox 83+, Safari 12.1+, Edge 79+). ते Internet Explorer मध्ये समर्थित नाहीत.

मी एक ही घटकावर अनेक ग्रेडिएंट वापरू शकतो? होय. CSS background स्तरांची अल्पविराम-विभक्त यादी स्वीकारते. आप्प ग्रेडिएंट स्टॅक करू शकतो, त्यांना पार्श्वभूमी प्रतिमांसह एकत्र करू शकतो, आणि प्रत्येक स्तरांची स्थिती आणि आकार स्वतंत्रपणे नियंत्रित करू शकतो.

Keywords: CSS ग्रेडिएंट जनरेटर, रेखीय ग्रेडिएंट, त्रिज्यीय ग्रेडिएंट, शंकूकार ग्रेडिएंट, CSS पार्श्वभूमी जनरेटर, ग्रेडिएंट रंग निवडक, CSS ग्रेडिएंट साधन