मोफत CSS ग्रेडिएंट जनरेटर

हे कसे कार्य करते

Gradient जनरेटर CSS gradient स्ट्रिंग्स थेट ब्राउझरमध्ये तयार करतो — लायब्ररी, सर्व्हर, अपलोड नाही. एक गराज-लिहिलेला फंक्शन तुमचे रंग stops आणि कोन यावरून रिअल टाइममध्ये योग्य linear-gradient, radial-gradient, किंवा conic-gradient सिंटॅक्स एकत्र करतो, नंतर तुम्ही निवडलेल्या आउटपुट लक्ष्यासाठी निकाल फॉरमॅट करतो.

1. 1
   Stops आणि दिशा कॉन्फिगर करा

   तुम्ही ब्राउझरचा native color picker वापरून 2 ते 6 रंग stops सेट करता, नंतर range स्लायडरने प्रत्येक stop ला 0–100% अक्षावर स्थान देता. linear आणि conic gradients साठी तुम्ही एक कोनही (0–360°) निवडता; radial gradients साठी तुम्ही आकार (ellipse किंवा circle) आणि gradient किती दूर पसरते हे नियंत्रित करणारा size keyword निवडता.
2. 2
   buildCss gradient स्ट्रिंग एकत्र करते

   प्रत्येक बदलावर, स्थानिक buildCss फंक्शन तुमचे पॅरामीटर्स योग्य CSS फंक्शन कॉलमध्ये एकत्र करते — उदा. linear-gradient(135deg, #0ea5e9 0%, #14b8a6 100%). कोणतीही लायब्ररी सामील नाही; स्ट्रिंग साध्या JavaScript template तर्कशास्त्राने बनवली जाते आणि stop array मधून थेट जोडली जाते.
3. 3
   लाइव्ह प्रिव्ह्यू inline style द्वारे रेंडर होतो

   एकत्रित gradient स्ट्रिंग div घटकावर inline background style म्हणून थेट लावली जाते, त्यामुळे ब्राउझरचे स्वतःचे CSS इंजिन प्रिव्ह्यू रेंडर करते. canvas किंवा इमेज सामील नाही — तुम्ही जे पाहता ते शब्दशः लावले जात असलेली CSS property आहे.
4. 4
   चार फॉरमॅट्समध्ये कॉपी-रेडी आउटपुट

   एक फॉरमॅट निवडक तीच gradient स्ट्रिंग साध्या CSS (background: ...), CSS-with-solid-fallback ब्लॉक, Tailwind arbitrary-value class, किंवा SCSS variable declaration मध्ये रूपांतरित करतो. Copy क्लिक केल्याने निवडलेला आउटपुट navigator.clipboard.writeText द्वारे clipboard वर लिहिला जातो. सध्याचा gradient URL hash मध्येही एन्कोड केलेला असतो त्यामुळे तुम्ही तो बुकमार्क किंवा शेअर करू शकता.

संबंधित साधने