मेरे टूल

CSS box-shadow जनरेटर

स्लाइडर खींचें या प्रीसेट चुनें — लाइव कार्ड पर छाया देखें और एक क्लिक में box-shadow CSS कॉपी करें।

प्रीसेट
लेयर
0px
8px
24px
-8px
#000000
15%
इसका उपयोग कैसे करें
  1. कार्ड पर पहले से एक सॉफ्ट छाया है — कोई भी स्लाइडर (X/Y ऑफ़सेट, ब्लर, स्प्रेड) खींचें, रंग और ओपसिटी चुनें, या अंदर की छाया के लिए Inset टिक करें। सब कुछ लाइव अपडेट होता है, कोई बटन दबाने की ज़रूरत नहीं।
  2. किसी प्रीसेट चिप (सॉफ्ट फ़्लोट, स्ट्रॉंग लिफ़्ट, Inset, नियन ग्लो, डबल, न्यूमॉर्फ़िज़्म) पर क्लिक करें — बने-बनाए लुक तुरंत आ जाते हैं।
  3. छायाएँ स्टैक करने के लिए “+” से और लेयर जोड़ें; हर लेयर अलग से एडिट होती है। पूरी box-shadow घोषणा एक क्लिक में कॉपी करें।
उदाहरण
प्रीसेट
सॉफ्ट फ़्लोट
box-shadow CSS
box-shadow: 0px 8px 24px -8px rgba(0, 0, 0, 0.15);
इसे सीधे किसी सेलेक्टर में पेस्ट करें, जैसे .card { box-shadow: 0px 8px 24px -8px rgba(0, 0, 0, 0.15); }। “डबल” प्रीसेट दो अल्पविरण से अलग की गई छायाएँ देता है; “न्यूमॉर्फ़िज़्म” को दिखने के लिए हल्की बैकग्राउंड चाहिए।
दायरा, सीमाएँ और आम सवाल
  • सिर्फ़ box-shadow: कोई drop-shadow() फ़िल्टर नहीं, text-shadow नहीं, और CSS में ग्रेडिएंट छायाएँ संभव नहीं — ये दायरे से बाहर हैं।
  • रंग पिकर से आता है और उसके साथ ओपसिटी स्लाइडर होता है; हम पेस्ट किया गया CSS रंग स्ट्रिंग पार्स नहीं करते, इसलिए ग़लत टाइप या ग़लत पढ़ने का सवाल ही नहीं पैदा होता।
  • न्यूमॉर्फ़िज़्म हल्की सतह पर निर्भर करता है — बहुत गहरी बैकग्राउंड पर उसका असर न दिखने जैसा हो सकता है। यह शैली की अपनी खासियत है, बग नहीं।
  • कुछ भी सेव नहीं होता और लिंक में पैरामीटर देकर शेयर नहीं होता: रीफ़्रेश करने पर डिफ़ॉल्ट सॉफ्ट फ़्लोट वापस आ जाता है। सब कुछ आपके ब्राउज़र में चलता है।
जब रंग या छाया में आगे तक जाना हो।
रंग कन्वर्टर
रंग योजना जनरेटर