कैसे इस्तेमाल करें
- Preset या default gradient से शुरू करें।
- Bar पर click करके colors जोड़ें और stops drag करके उनका स्थान बदलें।
- Linear, radial या conic चुनें और angle अथवा centre बदलें।
- CSS declaration या Tailwind class copy करें।
विकल्पों की जानकारी
- Linear
- Colors straight line में बदलते हैं। 0° ऊपर, 90° दाएँ और 180° नीचे जाता है।
- Radial
- Colors centre point से circle या element में fit ellipse की तरह फैलते हैं।
- Conic
- Colors centre point के चारों ओर color wheel या pie chart की तरह घूमते हैं।
- Repeat
- Pattern दोहराता है; stripes के लिए stops को 0% से 10% जैसी छोटी range में रखें।
बना हुआ कोड कैसा दिखता है
वही दो रंग, हर प्रकार से लिखे हुए। स्टॉप हमेशा प्रतिशत स्थिति के साथ लिखे जाते हैं:
linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%)
radial-gradient(ellipse at 50% 50%, #ff7e5f 0%, #feb47b 100%)
conic-gradient(from 0deg at 50% 50%, #ff7e5f 0%, #feb47b 100%)
repeating-linear-gradient(45deg, #000000 0%, #ffffff 10%)Tailwind संस्करण उसी मान को arbitrary-value क्लास में लपेट देता है। स्पेस अंडरस्कोर बन जाते हैं और कॉमा के बाद के स्पेस हटा दिए जाते हैं:
bg-[linear-gradient(135deg,#ff7e5f_0%,#feb47b_100%)]CSS की आख़िरी पंक्ति में पैटर्न एलिमेंट के हर 10% पर दोहराता है, जिससे पतली धारियाँ बनती हैं। conic ग्रेडिएंट में कोण वह जगह है जहाँ से घुमाव शुरू होता है, और radial ग्रेडिएंट में दोनों प्रतिशत केंद्र हैं।
अक्सर पूछे जाने वाले सवाल
इन gradients को कौन से browsers support करते हैं?
Linear, radial और conic gradients Chrome, Edge, Firefox और Safari के current versions में बिना vendor prefixes चलते हैं।
Transparent gradient कैसे बनाऊँ?
Stop के color field में alpha channel वाला color लिखें, जैसे पूरी तरह transparent black के लिए #00000000।
Tailwind class कैसे उपयोग करूँ?
इसे Tailwind CSS 3 या 4 में element की class list में जोड़ें। यह arbitrary value है, इसलिए configuration नहीं चाहिए।
प्राइवेसी
यह टूल पूरी तरह आपके ब्राउज़र में चलता है। आपकी फ़ाइलें और टेक्स्ट आपके डिवाइस पर ही प्रोसेस होते हैं और हमारे सर्वर पर कभी अपलोड नहीं होते।