मोफत कनवर्टर

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

थेट पूर्वावलोकनासह CSS ग्रेडियंट दृश्यमानपणे व्युत्पन्न करा. सानुकूल रंग स्टॉपसह रेखीय, रेडियल आणि कोनिक ग्रेडियंट तयार करा — विनामूल्य आणि क्लायंट-साइड.

थेट पूर्वावलोकन
CSS आउटपुट
.element {
  background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%);
}
Gradient Type
कोन (90deg)
90°180°270°360°
Color Stops
#6366f10%
#ec4899100%

या साधनाबद्दल

व्हिज्युअल एडिटरसह सुंदर CSS रेखीय आणि रेडियल ग्रेडियंट तयार करा. रंग निवडा, थांबे समायोजित करा, दिशा किंवा कोन बदला आणि रिअल टाइममध्ये थेट पूर्वावलोकन अद्यतन पहा. व्युत्पन्न केलेला CSS कोड कॉपी करा — जुन्या ब्राउझरसाठी विक्रेता उपसर्गांसह — आणि तो थेट तुमच्या स्टाईलशीटमध्ये पेस्ट करा.

कसे वापरावे

  1. ग्रेडियंट प्रकार निवडा: रेखीय किंवा रेडियल.
  2. ग्रेडियंट बारवर क्लिक करून आणि रंग निवडून रंग थांबे जोडा.
  3. नियंत्रणे वापरून ग्रेडियंट कोन (रेषीय) किंवा स्थिती (रेडियल) समायोजित करा.
  4. आउटपुट पॅनेलमधून व्युत्पन्न केलेला CSS कोड कॉपी करा.

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

CSS ग्रेडियंट सर्व ब्राउझरमध्ये कार्य करतात का?
आधुनिक CSS ग्रेडियंट (रेखीय-ग्रेडियंट, रेडियल-ग्रेडियंट) Chrome, Firefox, Safari आणि Edge सह सर्व वर्तमान ब्राउझरमध्ये समर्थित आहेत. साधन वैकल्पिकरित्या जुन्या ब्राउझर आवृत्त्यांसाठी -webkit- उपसर्ग व्युत्पन्न करू शकते.
मी बहु-रंग ग्रेडियंट तयार करू शकतो?
होय. आपल्याला आवश्यक तितके रंग स्टॉप जोडा. रंग कुठे मिसळतात हे नियंत्रित करण्यासाठी तुम्ही प्रत्येक स्टॉपची स्थिती देखील समायोजित करू शकता. हे जटिल इंद्रधनुष्य, सूर्यास्त किंवा सानुकूल ब्रँड ग्रेडियंटसाठी अनुमती देते.
रेखीय आणि रेडियल ग्रेडियंटमध्ये काय फरक आहे?
रेखीय ग्रेडियंट्स एका सरळ रेषेत रंग बदलतात (वरपासून खालपर्यंत, डावीकडून उजवीकडे, कर्णरेषा किंवा कोणताही कोन). रेडियल ग्रेडियंट्स एका गोलाकार किंवा लंबवर्तुळाकार आकारात केंद्रबिंदूपासून रंग बाहेरून बदलतात.
मी मजकूरासाठी पार्श्वभूमी म्हणून ग्रेडियंट वापरू शकतो का?
होय. मजकूरावर ग्रेडियंट लागू करण्यासाठी पार्श्वभूमी-क्लिप: -वेबकिट-टेक्स्ट-फिल-रंग: पारदर्शक असलेला मजकूर वापरा. व्युत्पन्न केलेले CSS ग्रेडियंट व्याख्या प्रदान करते — ग्रेडियंट मजकूरासाठी या गुणधर्मांसह ते एकत्र करा.