CSS शैडो जनरेटर
स्लाइडर घुमाइए और नमूना साथ-साथ बदलता जाएगा। एक शैडो कम पड़े तो लेयर जोड़िए — असली इंटरफ़ेस की नरम, भरोसेमंद गहराई इसी तरह बनती है।
शैडो
लेयर
टेक्स्ट शैडो में न स्प्रेड होता है न भीतरी मोड — CSS उन्हें नहीं लेता, और एक अतिरिक्त मान पूरी घोषणा रद्द कर देता है।
प्रीसेट
- मुफ़्त
- फ़ाइलें आपके डिवाइस से बाहर नहीं जातीं
- बिना रजिस्ट्रेशन
- फ़ाइलों की कोई सीमा नहीं
कैसे इस्तेमाल करें
- पहले चुनें कि शैडो किसे देनी है: ब्लॉक को या टेक्स्ट को।
- ऑफ़सेट, ब्लर और रंग तय करें — नमूना तुरंत फिर से बनता है।
- गहराई चाहिए तो एक लेयर जोड़ें: दो-तीन हल्की शैडो एक भारी शैडो से बेहतर दिखती हैं।
- नियंत्रणों के नीचे दी CSS पंक्ति कॉपी करें।
जानने योग्य बातें
टेक्स्ट शैडो में सेटिंग कम क्यों हैं
text-shadow प्रॉपर्टी सिर्फ़ ऑफ़सेट, ब्लर और रंग लेती है। स्प्रेड और भीतरी मोड केवल box-shadow के हैं, और एक अतिरिक्त मान पूरी घोषणा को अमान्य कर देता है: ब्राउज़र उसे चुपचाप छोड़ देता है और शैडो पूरी तरह ग़ायब हो जाती है। इसलिए टेक्स्ट मोड में ये दो नियंत्रण छिपा दिए जाते हैं, यह उम्मीद करने के बजाय कि उन्हें अनदेखा कर दिया जाएगा।
कई हल्की लेयर एक भारी लेयर से बेहतर
असली शैडो एक-सी नहीं होती: वस्तु के ठीक नीचे घनी होती है और दूर जाते-जाते घुल जाती है। भारी ब्लर वाली एक शैडो सिर्फ़ धूसर आभा देती है, जबकि अलग-अलग ऑफ़सेट और कम अपारदर्शिता वाली दो-तीन लेयर वही गहराई देती हैं जो सलीके से बने इंटरफ़ेस में दिखती है। यह टूल हर लेयर अलग रखता है, और कॉपी की गई पंक्ति उन्हें क्रम से गिनाती है।
अक्सर पूछे जाने वाले सवाल
स्प्रेड किस काम आता है?
यह ब्लर लगने से पहले शैडो को बड़ा या छोटा करता है। ऋणात्मक मान शैडो को भीतर समेट लेता है ताकि वह किनारों से बाहर न झाँके — कार्ड की साफ़-सुथरी शैडो का यही तरीक़ा है, जहाँ आभा ब्लॉक के नीचे रहनी चाहिए, चारों ओर नहीं।
भीतरी शैडो कैसे बनाएँ?
«भीतरी शैडो» पर निशान लगाएँ — पंक्ति की शुरुआत में inset आ जाता है और शैडो ब्लॉक के भीतर चली जाती है। दबे हुए बटन और इनपुट फ़ील्ड में इसी का इस्तेमाल होता है, जहाँ गहराई उभार नहीं, धँसाव लगनी चाहिए।
मेरी शैडो दिख क्यों नहीं रही?
अक्सर अपारदर्शिता शून्य होती है, या ऑफ़सेट और ब्लर दोनों शून्य होते हैं और शैडो ठीक ब्लॉक के पीछे छिप जाती है। अगर मूल तत्व पर overflow: hidden है और शैडो दिखने वाले क्षेत्र से बाहर पड़ती है, तब भी वह ग़ायब हो जाती है।
क्या यह हर ब्राउज़र में चलेगा?
हाँ। box-shadow और text-shadow वर्षों से मानक हैं और उन्हें किसी प्रीफ़िक्स की ज़रूरत नहीं; यहाँ बनने वाले मान सादा CSS हैं, बिना किसी वेंडर एक्सटेंशन के।
संबंधित टूल
- CSS ग्रेडिएंट जनरेटर स्लाइडर खींचिए और ऊपर का पैनल साथ-साथ बदलता देखिए। जब ठीक लगे, वह एक पंक्ति कॉपी करके अपनी स्टा…
- कलर पैलेट जनरेटर एक शुरुआती रंग चुनिए — बाकी रंग कलर व्हील के हिसाब से गिने जाते हैं। किसी भी स्वैच पर क्लिक करन…
- CSS फ़ॉर्मैटर स्टाइलशीट चिपकाइए — भले वह एक ही पंक्ति में आई हो — और फिर से पढ़िए। हर घोषणा को अपनी पंक्ति, न…
- CSS मिनिफ़ायर स्टाइलशीट चिपकाइए और उसे संपीड़ित रूप में पाइए। बॉक्स के नीचे का आँकड़ा पहले और बाद का आकार दिख…
- रंग कन्वर्टर किसी भी सामान्य लेखन में रंग लिखिए — #1f5fd6, 1f5fd6, #1f5, rgb(31, 95, 214) — बाक़ी सभी रूप एक…
- पासवर्ड जनरेटर पेज खुलते ही ब्राउज़र के क्रिप्टोग्राफ़िक रैंडम जनरेटर से नया पासवर्ड बन जाता है। न भेजा जाता ह…
- QR कोड जनरेटर लिंक या कोई भी टेक्स्ट लिखिए — कोड लिखते-लिखते बन जाता है। स्क्रीन के लिए PNG लें और छपाई के लि…
- UUID जनरेटर बटन दबाइए और ऐसे पहचानकर्ता पाइए जिन्हें सीधे डेटाबेस, कॉन्फ़िग या टेस्ट डेटा में चिपकाया जा सक…