CSS जेनरेटर

CSS शैडो जेनरेटर

box-shadow और text-shadow को विज़ुअली डिज़ाइन करें, कई लेयर जोड़ें और तैयार CSS कॉपी करें।

शैडो लेयर

शैडो सेटिंग्स

प्रीसेट

लाइव पूर्वावलोकन

पूर्वावलोकन का रूप

जनरेट किया गया CSS

.shadow-box {
  box-shadow: 0px 18px 40px -12px rgba(99, 102, 241, 0.55);
}

CSS शैडो के मान समझें

box-shadow में क्षैतिज और ऊर्ध्वाधर ऑफ़सेट, ब्लर, स्प्रेड, रंग और वैकल्पिक inset शामिल होते हैं। text-shadow में ऑफ़सेट, ब्लर और रंग होते हैं। कंट्रोल पूरी घोषणा को तुरंत अपडेट करते हैं ताकि हर मान का असर साफ़ दिखाई दे।

कई लेयर से गहराई बनाएँ

कई हल्की शैडो अक्सर एक भारी शैडो से अधिक स्वाभाविक दिखती हैं। सतह के संपर्क के लिए पास की गहरी लेयर को ऊँचाई के लिए नरम चौड़ी लेयर से जोड़ें, या चमक बनाने के लिए रंगीन लेयर को एक के ऊपर एक रखें।

प्रीव्यू से प्रोडक्शन CSS तक

box-shadow या text-shadow चुनें, किसी प्रीसेट से शुरू करें और फिर स्थिति, ब्लर, स्प्रेड, अपारदर्शिता, रेडियस और रंग समायोजित करें। CSS कॉपी करके उसे प्रोजेक्ट की असली पृष्ठभूमि और responsive स्थितियों पर जाँचें।

सीखें और बनाना जारी रखें

इस टूल को बेहतर बनाने में मदद करें

क्या टूल ने उम्मीद के अनुसार काम किया?

स्क्रीनशॉट या उदाहरण फ़ाइल के साथ छोटा विवरण भेजें। टूल का नाम अपने-आप भर जाएगा।