27 स्टाइलिश सीएसएस पृष्ठभूमि ढाल उदाहरण

एक डिज़ाइनर या डेवलपर के लिए शीर्ष वेब डिज़ाइन रुझानों और मानकों पर वर्तमान रहना बहुत महत्वपूर्ण है। वर्तमान में, आधुनिक वेबसाइटों में पृष्ठभूमि ग्रेडिएंट्स का व्यापक रूप से उपयोग किया जाता है।

इस लेख में, हम आपको CSS का उपयोग करके विभिन्न पृष्ठभूमि ग्रेडिएंट उदाहरणों के बारे में बताएंगे।

CSS का उपयोग करने वाले बैकग्राउंड ग्रेडिएंट

CSS ग्रेडिएंट दो या अधिक निर्दिष्ट रंगों का उपयोग करके एक सहज संक्रमण प्रदर्शित करता है। CSS ग्रेडिएंट वास्तविक छवि (ग्रेडिएंट की) फ़ाइल का उपयोग करने पर बेहतर नियंत्रण और प्रदर्शन प्रदान करता है। बैकग्राउंड-इमेज CSS प्रॉपर्टी का इस्तेमाल ग्रेडिएंट को बैकग्राउंड के रूप में घोषित करने के लिए किया जाता है।

तीन प्रकार के ग्रेडिएंट हैं: लीनियर ( रैखिक-ग्रेडिएंट () फ़ंक्शन के साथ बनाया गया), रेडियल ( रेडियल-ग्रेडिएंट () फ़ंक्शन के साथ बनाया गया), और कॉनिक ( कॉनिक-ग्रेडिएंट () फ़ंक्शन के साथ बनाया गया)। साथ ही, आप रिपीटिंग-लीनियर-ग्रेडिएंट () , रिपीटिंग-रेडियल-ग्रेडिएंट () और रिपीटिंग-कॉनिक-ग्रेडिएंट () फ़ंक्शंस के साथ रिपीटिंग ग्रेडिएंट बना सकते हैं।

एमडीएन डॉक्स इन कार्यों को इस प्रकार परिभाषित करता है:

लीनियर-ग्रेडिएंट () : लीनियर-ग्रेडिएंट () CSS फंक्शन एक इमेज बनाता है जिसमें एक सीधी रेखा के साथ दो या दो से अधिक रंगों के बीच एक प्रगतिशील संक्रमण होता है। इसका परिणाम <gradient> डेटा प्रकार का एक ऑब्जेक्ट है, जो एक विशेष प्रकार का <image> है

radial-gradient() : radial-gradient() CSS फ़ंक्शन एक छवि बनाता है जिसमें एक मूल से निकलने वाले दो या दो से अधिक रंगों के बीच एक प्रगतिशील संक्रमण होता है। इसका आकार एक वृत्त या दीर्घवृत्त हो सकता है। फ़ंक्शन का परिणाम <gradient> डेटा प्रकार का एक ऑब्जेक्ट है, जो एक विशेष प्रकार का <image> है

conic-gradient() : conic-gradient() CSS फ़ंक्शन एक छवि बनाता है जिसमें एक केंद्र बिंदु के चारों ओर घुमाए गए रंग संक्रमण के साथ एक ग्रेडिएंट होता है (बजाय केंद्र से विकिरण)। उदाहरण शंकु ग्रेडिएंट में पाई चार्ट और रंग के पहिये शामिल हैं। conic-gradient() फ़ंक्शन का परिणाम <gradient> डेटा प्रकार का एक ऑब्जेक्ट है, जो एक विशेष प्रकार का <image> है

रिपीटिंग-लीनियर-ग्रेडिएंट () : रिपीटिंग-लीनियर-ग्रेडिएंट () CSS फंक्शन एक इमेज बनाता है जिसमें रिपीट लीनियर ग्रेडिएंट्स होते हैं। यह ग्रेडिएंट/लीनियर-ग्रेडिएंट() के समान है और समान तर्क लेता है, लेकिन यह दोहराता है कि रंग सभी दिशाओं में असीम रूप से रुक जाता है ताकि इसके पूरे कंटेनर को कवर किया जा सके। फ़ंक्शन का परिणाम <gradient> डेटा प्रकार का एक ऑब्जेक्ट है, जो एक विशेष प्रकार का <image> है

रिपीटिंग-रेडियल-ग्रेडिएंट () : रिपीटिंग-रेडियल-ग्रेडिएंट () CSS फंक्शन एक इमेज बनाता है जिसमें रिपीटिंग ग्रेडिएंट होते हैं जो एक मूल से निकलते हैं। यह ग्रेडिएंट/रेडियल-ग्रेडिएंट() के समान है और एक ही तर्क लेता है, लेकिन यह सभी दिशाओं में रंग को अनंत रूप से रोकता है ताकि इसके पूरे कंटेनर को कवर किया जा सके, ग्रेडिएंट/रिपीटिंग-लीनियर-ग्रेडिएंट() के समान। फ़ंक्शन का परिणाम <gradient> डेटा प्रकार का एक ऑब्जेक्ट है, जो एक विशेष प्रकार का <image> है

रिपीटिंग-कॉनिक-ग्रेडिएंट () : रिपीटिंग-कॉनिक-ग्रेडिएंट () सीएसएस फंक्शन एक इमेज बनाता है जिसमें रिपीटिंग ग्रेडिएंट (एकल ग्रेडिएंट के बजाय) होता है, जिसमें कलर ट्रांजिशन एक सेंटर पॉइंट (केंद्र से विकिरण के बजाय) के चारों ओर घूमता है।

यहां प्रत्येक प्रकार के ग्रेडिएंट का आधिकारिक सिंटैक्स दिया गया है।

रैखिक ग्रेडियेंट का आधिकारिक सिंटेक्स

 linear-gradient(
[ <angle> | to <side-or-corner> ]? ,
<color-stop-list>
)
<side-or-corner> = [to left | to right] || [to top | to bottom]

रेडियल ग्रेडियेंट का आधिकारिक सिंटेक्स

 radial-gradient(
[ <ending-shape> || <size> ]? [ at <position> ]? ,
<color-stop-list>
);

कॉनिक ग्रेडिएंट्स का आधिकारिक सिंटेक्स

 conic-gradient(
[ from <angle> ]? [ at <position> ]?,
<angular-color-stop-list>
)

यहां कुछ शानदार बैकग्राउंड ग्रेडिएंट उदाहरण दिए गए हैं जो आपकी वेबसाइट के UI को अगले स्तर तक बढ़ा सकते हैं।

1. धूल भरी घास

उपरोक्त ग्रेडिएंट बनाने के लिए निम्नलिखित CSS का उपयोग करें:

 background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);

2. रेत से नीला

उपरोक्त ग्रेडिएंट बनाने के लिए निम्नलिखित CSS का उपयोग करें:

 background-image: linear-gradient(to right, #DECBA4, #3E5151);

3. के महो

उपरोक्त ग्रेडिएंट बनाने के लिए निम्नलिखित CSS का उपयोग करें:

 background-image: linear-gradient(to right, #8360c3, #2ebf91);

4. अमीन

उपरोक्त ग्रेडिएंट बनाने के लिए निम्नलिखित CSS का उपयोग करें:

 background-image: linear-gradient(to right, #8e2de2, #4a00e0);

5. आराम से लाल

उपरोक्त ग्रेडिएंट बनाने के लिए निम्नलिखित CSS का उपयोग करें:

 background-image: linear-gradient(to right, #fffbd5, #b20a2c);

6. उदात्त प्रकाश

उपरोक्त ग्रेडिएंट बनाने के लिए निम्नलिखित CSS का उपयोग करें:

 background-image: linear-gradient(to right, #fc5c7d, #6a82fb);

7. मेगाट्रॉन

उपरोक्त ग्रेडिएंट बनाने के लिए निम्नलिखित CSS का उपयोग करें:

 background-image: linear-gradient(to right, #c6ffdd, #fbd786, #f7797d);

8. ब्लू रास्पबेरी

उपरोक्त ग्रेडिएंट बनाने के लिए निम्नलिखित CSS का उपयोग करें:

 background-image: linear-gradient(to right, #00b4db, #0083b0);

9. प्रीमियम डार्क

उपरोक्त ग्रेडिएंट बनाने के लिए निम्नलिखित CSS का उपयोग करें:

 background-image: linear-gradient(to right, #434343 0%, black 100%);

10. क्रिस्टलीय

उपरोक्त ग्रेडिएंट बनाने के लिए निम्नलिखित CSS का उपयोग करें:

 background-image: linear-gradient(-20deg, #00cdac 0%, #8ddad5 100%);

11. लॉरेंसियम

उपरोक्त ग्रेडिएंट बनाने के लिए निम्नलिखित CSS का उपयोग करें:

 background-image: linear-gradient(to right, #0f0c29, #302b63, #24243e);

सम्बंधित: सीएसएस के साथ पृष्ठभूमि का रंग कैसे बदलें

12. खुशी

उपरोक्त ग्रेडिएंट बनाने के लिए निम्नलिखित CSS का उपयोग करें:

 background-image: linear-gradient(to right, #00b09b, #96c93d);

13. तनाव

उपरोक्त ग्रेडिएंट बनाने के लिए निम्नलिखित CSS का उपयोग करें:

 background-image: linear-gradient(to right, #870000, #190a05);

14. पीला आम

उपरोक्त ग्रेडिएंट बनाने के लिए निम्नलिखित CSS का उपयोग करें:

 background-image: radial-gradient(circle farthest-side, #fceabb, #f8b500);

संबंधित: कैस्केडिंग स्टाइल शीट क्या हैं और सीएसएस का उपयोग किस लिए किया जाता है?

15. रसदार घास

उपरोक्त ग्रेडिएंट बनाने के लिए निम्नलिखित CSS का उपयोग करें:

 background-image: radial-gradient( circle 759px at -6.7% 50%, rgba(80,131,73,1) 0%, rgba(140,209,131,1) 26.2%, rgba(178,231,170,1) 50.6%, rgba(144,213,135,1) 74.1%, rgba(75,118,69,1) 100.3% );

16. गुलाबी मछली

उपरोक्त ग्रेडिएंट बनाने के लिए निम्नलिखित CSS का उपयोग करें:

 background-image: linear-gradient(to right, rgb(242, 112, 156), rgb(255, 148, 114));

संबंधित: आवश्यक CSS3 गुण पत्रक धोखा

17. सागर भगवान

उपरोक्त ग्रेडिएंट बनाने के लिए निम्नलिखित CSS का उपयोग करें:

 background-image: linear-gradient( 109.6deg, rgba(156,252,248,1) 11.2%, rgba(110,123,251,1) 91.1% );

18. चेरी ब्लॉसम

उपरोक्त ग्रेडिएंट बनाने के लिए निम्नलिखित CSS का उपयोग करें:

 background-image: linear-gradient(25deg,#d64c7f,#ee4758 50%);

19. ताजी हवा

उपरोक्त ग्रेडिएंट बनाने के लिए निम्नलिखित CSS का उपयोग करें:

 background-image: linear-gradient( 95.2deg, rgba(173,252,234,1) 26.8%, rgba(192,229,246,1) 64% );

20. तारकीय

उपरोक्त ग्रेडिएंट बनाने के लिए निम्नलिखित CSS का उपयोग करें:

 background-image: radial-gradient( circle farthest-corner at 22.4% 21.7%, rgba(4,189,228,1) 0%, rgba(2,83,185,1) 100.2% );

21. दोपहर से शाम तक

उपरोक्त ग्रेडिएंट बनाने के लिए निम्नलिखित CSS का उपयोग करें:

 background-image: linear-gradient(to right, #ff6e7f, #bfe9ff);

22. सूर्योदय

उपरोक्त ग्रेडिएंट बनाने के लिए निम्नलिखित CSS का उपयोग करें:

 background-image: linear-gradient(to right, #ff512f, #f09819);

23. वन

उपरोक्त ग्रेडिएंट बनाने के लिए निम्नलिखित CSS का उपयोग करें:

 background-image: linear-gradient(to right, #5a3f37, #2c7744);

24. सुपरमैन

उपरोक्त ग्रेडिएंट बनाने के लिए निम्नलिखित CSS का उपयोग करें:

 background-image: linear-gradient(to right, #0099f7, #f11712);

25. डीप-सी स्पेस

उपरोक्त ग्रेडिएंट बनाने के लिए निम्नलिखित CSS का उपयोग करें:

 background-image: linear-gradient(to right, #2c3e50, #4ca1af);

26. रॉयल

उपरोक्त ग्रेडिएंट बनाने के लिए निम्नलिखित CSS का उपयोग करें:

 background-image: linear-gradient(to right, #141e30, #243b55);

27. नारंगी मूंगा

उपरोक्त ग्रेडिएंट बनाने के लिए निम्नलिखित CSS का उपयोग करें:

 background-image: linear-gradient(to right, #ff9966, #ff5e62);

नोट : इस आलेख में प्रयुक्त कोड एमआईटी लाइसेंस प्राप्त है

ग्रेडिएंट के साथ अपने वेबपेज को सुंदर बनाएं

आप अपने वेबपेज के कई तत्वों जैसे बैकग्राउंड, बॉर्डर, आइकन, बटन, टेक्स्ट, अंडरलाइनिंग, लिस्ट बुलेट आदि के साथ ग्रेडिएंट का उपयोग कर सकते हैं। अपनी साइट के डिज़ाइन को नई ऊंचाइयों पर ले जाएं।

यदि आप अपने वेबपेज के कुछ नरम तत्वों में जीवन जोड़ना चाहते हैं, तो आप बॉक्स-शैडो सीएसएस संपत्ति को आजमा सकते हैं। यह तत्वों को एक आधुनिक रूप देगा।