CSS ग्रेडिएंट
सुंदर CSS ग्रेडिएंट बनाएँ।
Color Stops
Orientation
CSS Output
Quick Presets
अनुशंसित टूल्स
चुने हुए उपयोगी टूल्स
CSS ग्रेडिएंट दृश्य रूप से बनाना
अवलोकन
CSS ग्रेडिएंट पृष्ठभूमि, बटन और ओवरले के लिए सहज रंग संक्रमण बनाते हैं। ग्रेडिएंट सिंटैक्स हाथ से लिखना असुविधाजनक है। यह जनरेटर आपको रंग और दिशा दृश्य रूप से चुनने देता और चिपकाने को तैयार CSS देता है, ब्राउज़र में लाइव प्रीव्यू के साथ।
कैसे उपयोग करें (चरण-दर-चरण)
- 1
रंग चुनें
दो या अधिक रंग बिंदु जोड़ें।
- 2
प्रकार और कोण समायोजित करें
रैखिक, रेडियल या कोणीय, इच्छित दिशा के साथ।
- 3
CSS कॉपी करें
बना background गुण अपनी स्टाइलशीट में चिपकाएँ।
यह कैसे काम करता है
आप रंग बिंदु (stops), उनकी स्थिति और ग्रेडिएंट प्रकार — रैखिक, रेडियल या कोणीय — चुनते हैं, और टूल संबंधित background गुण बनाता है। रैखिक दिए कोण पर सीधी रेखा में जाते हैं; रेडियल केंद्र से बाहर फैलते हैं। बिंदु जोड़ना और स्थिति समायोजित करना संक्रमण तय करते हैं। आप परिणाम लाइव देखते और CSS कॉपी करते हैं।
कब उपयोगी है
हीरो सेक्शन के लिए पृष्ठभूमि ग्रेडिएंट बनाना। रंग संक्रमण से बटन या कार्ड सजाना। कोड में डालने से पहले रंग योजना का प्रोटोटाइप।
अक्सर पूछे जाने वाले प्रश्न
रैखिक एक कोण पर सीधी रेखा में संक्रमण करता है; रेडियल केंद्र बिंदु से वृत्त या दीर्घवृत्त में बाहर फैलता है।