CSS बॉक्स शैडो जेनरेटर
लाइव स्लाइडर से ऑफ़सेट, ब्लर, स्प्रेड, रंग और ओपेसिटी सेट करें, हल्की या गहरी सतह पर नतीजा देखें, और साफ़-सुथरा box-shadow CSS कॉपी करें — सब कुछ आपके ब्राउज़र में ही।
X ऑफ़सेट
px
Y ऑफ़सेट
px
ब्लर
px
स्प्रेड
px
रंग
#0a0a0a
ओपेसिटी
%
box-shadow: 0px 10px 25px 0px rgba(10, 10, 10, 0.2);
CSS बॉक्स शैडो जेनरेटर का उपयोग कैसे करें
- 1
ऑफ़सेट सेट करें
शैडो को बाएँ, दाएँ, ऊपर या नीचे खिसकाने के लिए X और Y ऑफ़सेट स्लाइडर का उपयोग करें। धनात्मक Y मान शैडो को एलिमेंट के नीचे ले जाता है, और ऋणात्मक मान उसे ऊपर उठा देता है।
- 2
शैडो को आकार दें
नरम, फैले हुए किनारे के लिए ब्लर बढ़ाएँ या तीखी शैडो के लिए उसे कम रखें। स्प्रेड, ब्लर लगने से पहले शैडो को बड़ा या छोटा कर देता है।
- 3
रंग और ओपेसिटी चुनें
शैडो का रंग चुनने के लिए स्वैच पर क्लिक करें, फिर ओपेसिटी सेट करें। हल्की ओपेसिटी वाली नरम, गहरी शैडो हल्के बैकग्राउंड पर सबसे स्वाभाविक दिखती हैं।
- 4
CSS कॉपी करें
ज़रूरत हो तो भीतरी शैडो के लिए inset टॉगल करें, उसे हल्की या गहरी सतह पर देखें, फिर box-shadow लाइन को अपनी स्टाइलशीट में कॉपी कर लें।
अक्सर पूछे जाने वाले प्रश्न
मैं CSS बॉक्स शैडो कैसे बनाऊँ?
box-shadow के हर मान का क्या मतलब है?
inset शैडो क्या होती है?
मैं नरम, स्वाभाविक शैडो कैसे बनाऊँ?
क्या मेरा डेटा किसी सर्वर पर अपलोड होता है?
संबंधित टूल्स
इन उपयोगी टूल्स के साथ आगे बढ़ें