CSS ग्रेडिएंट जनरेटर
CSS ग्रेडिएंट म्हणजे काय?
CSS ग्रेडिएंट तुम्हाला इमेज फाइल्सशिवाय दोन किंवा अधिक रंगांमध्ये मृदू संक्रमणे दाखवण्याची परवानगी देतात. ते तीन प्रकारांत येतात: linear-gradient (सरळ रेषेने), radial-gradient (मध्यवर्ती बिंदूपासून बाहेर पसरणारे), आणि conic-gradient (मध्यवर्ती बिंदूभोवती फिरणारे). ग्रेडिएंट पार्श्वभूमी, बटणे, ओव्हरले आणि सजावटीच्या घटकांसाठी वापरले जातात.
CSS ग्रेडिएंट जनरेटर कसे वापरावे
-
स्वॉचेसमधून प्रीसेट निवडा किंवा स्वतःचे ग्रेडिएंट कॉन्फिगर करा.
-
ग्रेडिएंट प्रकार निवडा: linear, radial किंवा conic.
-
कोन (linear/conic साठी) किंवा आकार (radial साठी) समायोजित करा.
-
रंग थांबे संपादित करा — रंग आणि स्थान (0–100%) बदला.
-
आवश्यकतेनुसार रंग थांबे जोडा किंवा काढा.
-
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 ग्रेडिएंट साधन