সিএসএস বক্স শ্যাডো জেনারেটর

CSS box-shadow generator কী?

এই box-shadow generator HTML element-এর জন্য visual shadow তৈরি করে এবং live CSS output দেখায়। প্রতিটি shadow layer-এ X offset, Y offset, blur, spread, color, opacity এবং inset option আছে। X/Y negative বা positive হতে পারে, blur 0-100px, spread -30 থেকে 30px, opacity 0-100% রেঞ্জে চলে। Color picker থেকে shadow color বদলানো যায়। Add বোতামে নতুন layer যোগ করা যায়, layer remove করা যায়, আর preview panel-এ একটি white box-এর ওপর shadow বাস্তব সময়ে দেখা যায়। Output textarea-তে `box-shadow: ...;` rule তৈরি হয় এবং Copy বোতামে কপি করা যায়।

Preset কী দেয়?

Tool-এ subtle, medium, large, dramatic, inset, colored, material এবং neon preset আছে। Subtle ছোট UI card বা input-এর জন্য নরম shadow দেয়। Large ও dramatic বেশি depth তৈরি করে, যা modal, floating panel বা hero card-এ ব্যবহারযোগ্য। Inset shadow element-এর ভেতরে চাপা effect দেয়। Colored shadow brand accent বা glow effect-এর জন্য ব্যবহৃত হতে পারে। Material preset দুই layer ব্যবহার করে, আর neon preset একই color-এর একাধিক blur layer দিয়ে glow তৈরি করে। Preset বেছে নেওয়ার পরও slider দিয়ে মান fine-tune করা যায়।

CSS syntax বোঝা

Box-shadow syntax সাধারণত `offset-x offset-y blur-radius spread-radius color`। Inset থাকলে shadow element-এর ভিতরে পড়ে। X offset positive হলে shadow ডানে যায়, negative হলে বামে। Y offset positive হলে নিচে, negative হলে উপরে। Blur বেশি হলে shadow নরম হয়, spread positive হলে shadow বড় হয়, negative হলে সংকুচিত হয়। এই tool HEX color ও opacity থেকে rgba(...) তৈরি করে, যাতে translucent shadow ব্যবহার করা যায়। Multiple layer comma দিয়ে আলাদা হয়; layer order visual depth-এ প্রভাব ফেলতে পারে।

ব্যবহার ও সতর্কতা

Shadow depth hierarchy বোঝাতে ভালো, কিন্তু অতিরিক্ত shadow UI-কে ভারী ও অগোছালো করে। Dashboard, form বা table-heavy app-এ subtle shadow বা border প্রায়ই যথেষ্ট। Dark background-এ কালো shadow দেখা নাও যেতে পারে; colored বা light shadow দরকার হতে পারে। Preview background color picker দিয়ে পেজের সম্ভাব্য background মিলিয়ে পরীক্ষা করুন। Accessibility সরাসরি shadow দিয়ে মাপা যায় না, কিন্তু focus ring বা error state যেন shadow-এর মধ্যে হারিয়ে না যায় তা দেখা জরুরি। Performance দিক থেকে বড় blur, বহু layer এবং animated box-shadow low-end device-এ ব্যয়বহুল হতে পারে। Production CSS-এ repeated shadow হলে variable বা utility class ব্যবহার করুন, যেমন `--shadow-card` বা `.shadow-elevated`, যাতে design system consistent থাকে।

Shadow scale তৈরি করতে একই project-এ ছোট, মাঝারি ও বড় তিন-চারটি preset রাখুন। এলোমেলো shadow value ব্যবহার করলে interface inconsistent লাগে। Hover state-এ shadow বাড়ালে element clickable মনে হতে পারে, কিন্তু focus state শুধু shadow দিয়ে বোঝালে keyboard user সমস্যায় পড়তে পারেন। Dark mode-এ shadow-এর বদলে border, outline বা subtle highlight বেশি কার্যকর হতে পারে।