CSS বক্স শ্যাডো জেনারেটর
স্লাইডার টানুন বা প্রিসেট বাছুন — লাইভ কার্ডে শ্যাডো দেখুন এবং এক ক্লিকে box-shadow CSS কপি করুন।
প্রিসেট
স্তর
0px
8px
24px
-8px
#000000
15%
কীভাবে ব্যবহার করবেন
- কার্ডে ইতিমধ্যেই একটি নরম শ্যাডো আছে — যেকোনো স্লাইডার (X/Y অফসেট, ব্লার, স্প্রেড) টানুন, রঙ ও অস্বচ্ছতা বাছুন, বা ভেতরের শ্যাডোর জন্য ইনসেট টিক দিন। সবকিছু লাইভ হালনাগাদ হয়, কোনো বোতাম চাপতে হয় না।
- প্রিসেট চিপে (নরম ভাসমান, জোরালো উত্থান, ইনসেট, নিয়ন গ্লো, ডাবল, নিউমরফিজম) ক্লিক করে সঙ্গে সঙ্গে প্রস্তুত চেহারা বসান।
- "+" দিয়ে আরও স্তর যোগ করে শ্যাডো স্তূপ করুন; প্রতিটি স্তর আলাদাভাবে সম্পাদিত হয়। এক ক্লিকে সম্পূর্ণ 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 রঙের স্ট্রিং আমরা পার্স করি না, তাই ভুল টাইপ বা ভুল পড়ার সুযোগ নেই।
- নিউমরফিজম হালকা পৃষ্ঠের উপর নির্ভর করে — খুব গাঢ় ব্যাকগ্রাউন্ডে এর প্রভাব অদৃশ্য হতে পারে। এটি স্টাইলের বৈশিষ্ট্য, বাগ নয়।
- কিছুই সংরক্ষিত হয় না বা লিংকের প্যারামিটারে শেয়ার হয় না: রিফ্রেশ করলেই ডিফল্ট নরম ভাসমান অবস্থায় ফিরে যাবেন। সবকিছু আপনার ব্রাউজারে চলে।
সম্পর্কিত টুল
রঙ বা শ্যাডো নিয়ে আরও এগোতে চাইলে।