CSS বক্স শ্যাডো জেনারেটর কী?

ফ্রি অনলাইন CSS বক্স শ্যাডো জেনারেটর। ভিজুয়াল কন্ট্রোলের মাধ্যমে অফসেট, ব্লার, স্প্রেড এবং রঙ সামঞ্জস্য করে তাৎক্ষণিক CSS কোড জেনারেট করুন।

CSS box-shadow প্রপার্টি একটি ওয়েব ডিজাইনারদের টুলকিটের সবচেয়ে বহুমুখী টুলগুলোর একটি, UI এলিমেন্টে গভীরতা, শ্রেণিবিন্যাস এবং ভিজ্যুয়াল আগ্রহ যোগ করতে সক্ষম। CSS বক্স শ্যাডো জেনারেটর box-shadow CSS কোড তৈরি করার জন্য একটি ভিজ্যুয়াল ইন্টারফেস প্রদান করে, প্রতিটি প্যারামিটারের উপর সম্পূর্ণ নিয়ন্ত্রণ এবং রিয়েল টাইমে আপডেট হওয়া একটি ইন্টারঅ্যাক্টিভ প্রিভিউসহ।

জেনারেটরটি স্লাইডারের মাধ্যমে পাঁচটি সামঞ্জস্যযোগ্য প্যারামিটার প্রকাশ করে। X অফসেট ছায়াকে অনুভূমিকভাবে সরায় (ধনাত্মক মান ডানে, ঋণাত্মক মান বামে সরায়)। Y অফসেট ছায়াকে উল্লম্বভাবে সরায় (ধনাত্মক মান নিচে, ঋণাত্মক মান উপরে সরায়)। ব্লার রেডিয়াস ছায়ার প্রান্ত কতটা নরম তা নিয়ন্ত্রণ করে — শূন্য একটি তীক্ষ্ণ ড্রপ শ্যাডো তৈরি করে, যখন উচ্চতর মান একটি নরম, আরও বিস্তৃত প্রভাব তৈরি করে। স্প্রেড রেডিয়াস ব্লারকে প্রভাবিত না করেই ছায়ার আকার প্রসারিত বা সংকুচিত করে। কালার পিকার আলফা চ্যানেলের মাধ্যমে opacity নিয়ন্ত্রণসহ ছায়ার রং সেট করে।

একটি লাইভ প্রিভিউ কার্ড প্রতিটি সমন্বয়ের প্রভাব অবিলম্বে দেখায়। প্রিভিউ কার্ডটি একটি বাস্তব UI কম্পোনেন্ট অনুকরণ করার জন্য সাদা ব্যাকগ্রাউন্ড এবং গোল কোণসহ স্টাইল করা হয়, তাই আপনার প্রকৃত ইন্টারফেস এলিমেন্টে ছায়া ঠিক কেমন দেখাবে তা দেখতে পারেন। দ্রুত নির্বাচনের জন্য ছয়টি প্রিসেট শ্যাডো অন্তর্ভুক্ত: সূক্ষ্ম, মাঝারি, ভারী, ঝাপসা, ইনসেট এবং উত্তোলিত।

জেনারেট করা CSS box-shadow কোড একটি কপি-প্রস্তুত ফরম্যাটে প্রদর্শিত হয়। আউটপুট ভেতরের ছায়ার জন্য inset কীওয়ার্ডসহ সম্পূর্ণ শর্টহ্যান্ড সিনট্যাক্স সমর্থন করে। আউটপুট কপি করে ম্যানুয়ালি একাধিক ডিক্লারেশন পেস্ট করে একাধিক box-shadow মান একত্রিত করা যায়। টুলটিও যাচাই করে সিনট্যাক্স সঠিক, তাই প্রতিটি কপি একটি বৈধ CSS ডিক্লারেশন।

CSS বক্স শ্যাডো জেনারেটর-এর বাস্তব ব্যবহারের উদাহরণ

ড্যাশবোর্ড UI-এর জন্য একটি সূক্ষ্ম কার্ড শ্যাডো তৈরি

আপনার ড্যাশবোর্ডে মেট্রিক্স এবং চার্ট প্রদর্শনকারী কার্ড রয়েছে। 10% opacity-এ হালকা ধূসর রঙসহ X=0, Y=2, Blur=4, Spread=0 সেট করতে জেনারেটর ব্যবহার করুন। ফলস্বরূপ ছায়া কার্ডগুলিতে সূক্ষ্ম গভীরতা তৈরি করে। জেনারেট করা CSS কপি করুন এবং আপনার কার্ড কম্পোনেন্ট ক্লাসে প্রয়োগ করুন।

ল্যান্ডিং পেজের জন্য একটি উত্তোলিত বাটন ইফেক্ট ডিজাইন

একটি কল-টু-অ্যাকশন বাটনের একটি উত্তোলিত চেহারা দরকার। গাঢ় ছায়া রঙসহ X=0, Y=4, Blur=6, Spread=-1 সেট করুন। ইনসেট অপশনটি বন্ধ করুন। ফলাফল একটি বাটন যা পেজের উপরিভাগের উপরে ভাসমান দেখা যায়। শুরুর পয়েন্ট হিসেবে "Lifted" প্রিসেটে ক্লিক করুন এবং মানগুলো সূক্ষ্মভাবে টিউন করুন।

সার্চ ইনপুট ফোকাস স্টেটের জন্য একটি ইনসেট শ্যাডো তৈরি

একটি সার্চ ইনপুট ফিল্ড ফোকাস করার সময় একটি ভেতরের গ্লো দরকার। ইনসেট অপশনটি চালু করুন। 30% opacity-এ প্রাথমিক ব্র্যান্ড রঙসহ X=0, Y=2, Blur=4, Spread=0 সেট করুন। ইনসেট ছায়া ইনপুট বর্ডারের ভেতরে প্রদর্শিত হয়, ব্যবহারকারীকে ফোকাস সংকেত দেয়।

কেন CSS বক্স শ্যাডো জেনারেটর ব্যবহার করবেন?

  • Full control: X/Y offset, blur, spread, color
  • Inset shadow toggle
  • লাইভ preview on a card element
  • 6 preset shadows included

CSS বক্স শ্যাডো জেনারেটর কীভাবে ব্যবহার করবেন — ধাপে ধাপে

1

X offset, Y offset, blur, and spread using sliders. সামঞ্জস্য করুন।

2

a shadow color and toggle inset if needed. বেছে নিন।

3

Preview the shadow on the card in real-time.

4

the generated CSS box-shadow code. কপি করুন।

CSS বক্স শ্যাডো জেনারেটর কার জন্য সেরা?

  • UI design
  • card styling
  • button effects
  • ওয়েব ডেভেলপমেন্ট

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

  • 1box-shadow শর্টহ্যান্ডে মানের ক্রম হল: X-offset Y-offset blur-radius spread-radius color। Inset অবশ্যই প্রথম বা শেষে আসবে। জেনারেটরটি স্বয়ংক্রিয়ভাবে সঠিক সিনট্যাক্স আউটপুট করে।
  • 2স্তরযুক্ত ছায়া আরও বাস্তবসম্মত গভীরতা তৈরি করে। দুটি ছায়া ব্যবহার করুন: প্রধান গভীরতার জন্য একটি সূক্ষ্ম অফসেট ছায়া এবং অ্যাম্বিয়েন্ট আলোর জন্য একটি বড়, নরম, কম opacity-র ছায়া। উদাহরণ: box-shadow: 0 4px 6px rgba(0,0,0,0.1), 0 10px 20px rgba(0,0,0,0.08)।
  • 3খুব বড় এলিমেন্টে (সম্পূর্ণ-পেজ কন্টেইনার) box-shadow ব্যবহার এড়িয়ে চলুন। বড় ছায়ার রেন্ডারিং খরচ স্ক্রল পারফরম্যান্সকে প্রভাবিত করতে পারে, বিশেষ করে মোবাইল ডিভাইসে।
  • 4ঋণাত্মক মানের স্প্রেড প্যারামিটার এলিমেন্টের চেয়ে ছোট একটি ছায়া তৈরি করে। ব্লারের সাথে একত্রিত হলে, এটি একটি "ভিগনেট" প্রভাব তৈরি করে যেখানে ছায়া প্রান্তের চারপাশে ঘনীভূত হয়।

CSS বক্স শ্যাডো জেনারেটর — প্রায়শই জিজ্ঞাসিত প্রশ্ন

What is CSS box-shadow?

box-shadow is a CSS property that adds shadow effects around an element. It accepts X offset, Y offset, blur radius, spread radius, color, and an optional inset keyword.

Can I apply multiple shadows?

Yes, separate multiple shadows with commas: box-shadow: 0 4px 6px rgba(0,0,0,0.1), 0 1px 3px rgba(0,0,0,0.08);

Will the generated CSS work in all browsers?

The CSS generators produce W3C-standard code that works in Chrome, Firefox, Safari, and Edge. Vendor prefixes are included where needed for older browser versions.

Can I copy the generated code directly?

Yes. Each generator provides a copy button that places the code on your clipboard. The code is ready to paste into your project — no cleanup or modification needed.

Is CSS বক্স শ্যাডো জেনারেটর really free to use?

Yes, CSS বক্স শ্যাডো জেনারেটর is completely free with no hidden charges, no usage limits, and no premium tiers. You can use it as often as you need without signing up or providing any personal information.

CSS বক্স শ্যাডো জেনারেটর ব্যবহার করতে প্রস্তুত?

বিনামূল্যের অনলাইন টুল — আপনার ব্রাউজারে কাজ করে, নিবন্ধনের প্রয়োজন নেই। এখনই ব্যবহার শুরু করুন।

এখনই চেষ্টা করুন
Free Forever · No Sign-up

182 Free Tools at Your Fingertips

All free online tools for developers, designers, students, and creators. Every tool works in your browser — no sign-up, no data collection.