Backgrounds, Borders & Shadows

ব্যাকগ্রাউন্ড, বর্ডার ও শ্যাডো

Read: ~18 min Beginner 5 practice problems Live preview runner

1. The Finishing Touches That Make Something Look Designed

So far your boxes have content, spacing, and maybe a color or two. This module is about the details that separate a plain, amateur-looking box from a card that looks like it belongs in a real product: backgrounds, rounded corners, and shadows. None of these properties are complicated on their own — the skill is combining two or three of them together.

এখন পর্যন্ত আপনার বক্সগুলোতে কনটেন্ট, স্পেসিং এবং হয়তো একটি-দুটি রঙ আছে। এই মডিউলে আমরা শিখব সেই ছোট ছোট ডিটেইলগুলো, যা একটি সাধারণ বক্সকে বাস্তব প্রোডাক্টের মতো দেখতে সাহায্য করে — ব্যাকগ্রাউন্ড, গোলাকার কোণা এবং শ্যাডো। প্রতিটি প্রপার্টি আলাদাভাবে সহজ, আসল দক্ষতা হলো দুই-তিনটি একসাথে ব্যবহার করা।

2. background-color & background-image

background-color fills the entire content+padding area of a box with a solid color. background-image instead places an image (or a gradient — more on that later) behind the content. If both are set, the image is drawn on top of the color, so the color acts as a fallback while the image loads.

background-color একটি বক্সের পুরো content+padding অংশ একটি সলিড রঙ দিয়ে ভরে দেয়। background-image এর বদলে একটি ছবি (বা gradient) বক্সের পেছনে বসায়। দুটোই সেট করা থাকলে ছবি রঙের ওপরে বসে — অর্থাৎ ছবি লোড হওয়ার আগে রঙটি fallback হিসেবে কাজ করে।

bg-basics.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Background Basics</title>
</head>
<body>
  <div class="solid-card">Solid background-color</div>
  <div class="image-card">background-image with a fallback color</div>
</body>
</html>

style.css

.solid-card, .image-card {
  padding: 24px;
  margin-bottom: 12px;
  border-radius: 8px;
  color: #ffffff;
  font-weight: 600;
  font-family: sans-serif;
}

.solid-card {
  background-color: #39b549;
}

.image-card {
  background-color: #0f172a; /* fallback while the image loads */
  background-image: url("https://picsum.photos/500/200");
}

3. background-size, background-position & repeat

By default a background image tiles (repeats) at its natural size. Three properties control this: background-size (cover fills the box, cropping if needed; contain fits the whole image inside without cropping), background-position (where the image is anchored, e.g. center), and background-repeat (no-repeat, repeat-x, repeat-y).

ডিফল্টভাবে একটি background image তার আসল সাইজে বারবার repeat হতে থাকে। তিনটি প্রপার্টি এটি নিয়ন্ত্রণ করে — background-size (cover পুরো বক্স ভরে দেয়, প্রয়োজনে ক্রপ করে; contain পুরো ছবিটি বক্সের ভেতরে রাখে ক্রপ ছাড়াই), background-position (ছবি কোথায় বসবে, যেমন center), এবং background-repeat (no-repeat, repeat-x, repeat-y)।

bg-size-position.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Background Size & Position</title>
</head>
<body>
  <div class="hero">
    <h2>cover + center</h2>
  </div>
</body>
</html>

style.css

.hero {
  height: 200px;
  border-radius: 10px;
  color: #ffffff;
  text-align: center;
  padding-top: 70px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);

  background-image: url("https://picsum.photos/800/300");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

background-size Quick Reference

Value	Meaning	বাংলায়
`cover`	Scales up so the box is fully covered; may crop the image.	বক্স সম্পূর্ণ ঢেকে দেয়; প্রয়োজনে ছবি ক্রপ হয়।
`contain`	Scales so the whole image fits; may leave empty space.	পুরো ছবি দেখা যায়; খালি জায়গা থাকতে পারে।
`auto` (default)	Uses the image's natural size.	ছবির স্বাভাবিক সাইজ ব্যবহার করে।
`100px 50px`	Explicit width and height.	নির্দিষ্ট width ও height।

4. border-radius — Rounding the Corners

border-radius rounds the corners of any box — no image editing required. A small value (like 8px) softens a card. Setting it to 50% on a square element turns it into a perfect circle, which is the standard technique for round profile avatars.

border-radius যেকোনো বক্সের কোণা গোলাকার করে দেয় — কোনো ইমেজ এডিটিং লাগে না। ছোট একটি মান (যেমন 8px) কার্ডকে নরম দেখায়। একটি বর্গাকার এলিমেন্টে এটি 50% করলে পুরোপুরি বৃত্ত তৈরি হয়ে যায় — এটাই round প্রোফাইল অ্যাভাটার বানানোর standard কৌশল।

border-radius.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>border-radius</title>
</head>
<body>
  <div class="card">Rounded card (8px)</div>
  <div class="avatar">AR</div>
  <div class="pill">Pill button</div>
</body>
</html>

style.css

body { font-family: sans-serif; }

.card {
  display: inline-block;
  padding: 20px;
  background: #f1f5f9;
  border-radius: 8px;
  margin-right: 12px;
}

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  background: #39b549;
  color: white;
  font-weight: 700;
  border-radius: 50%;   /* square -> perfect circle */
  margin-right: 12px;
}

.pill {
  display: inline-block;
  padding: 10px 22px;
  background: #0f172a;
  color: white;
  border-radius: 999px; /* very large radius = fully rounded ends */
}

Key insight border-radius: 50% only makes a perfect circle if the element's width and height are equal. On a non-square box it produces an ellipse instead.

border-radius: 50% তখনই একটি নিখুঁত বৃত্ত তৈরি করে যখন এলিমেন্টের width ও height সমান। বর্গাকার না হলে এটি একটি ellipse (ডিম্বাকার) তৈরি করে।

5. box-shadow & text-shadow — Depth & Emphasis

box-shadow: offset-x offset-y blur-radius color; drops a shadow behind an element, which is the single biggest trick for making a flat box feel like it's floating above the page. Add the inset keyword to draw the shadow inside the box instead. text-shadow works the same way but applies to text glyphs, useful for making light text readable over a photo.

box-shadow: offset-x offset-y blur-radius color; একটি এলিমেন্টের পেছনে শ্যাডো ফেলে দেয় — একটি ফ্ল্যাট বক্সকে পেজের ওপরে ভাসমান মনে করানোর সবচেয়ে বড় কৌশল এটি। inset কিওয়ার্ড দিলে শ্যাডো বক্সের ভেতরের দিকে পড়ে। text-shadow একই নিয়মে কাজ করে কিন্তু টেক্সটের জন্য — ছবির ওপর হালকা রঙের টেক্সট পড়া সহজ করতে এটি কাজে লাগে।

shadows.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Shadows</title>
</head>
<body>
  <div class="floating-card">
    <h3>Floating Card</h3>
    <p>box-shadow makes this feel lifted off the page.</p>
  </div>
  <div class="pressed">inset shadow — feels pressed in</div>
</body>
</html>

style.css

body { font-family: sans-serif; background: #f8f9fa; padding: 20px; }

.floating-card {
  background: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
  margin-bottom: 16px;
}

.floating-card h3 {
  text-shadow: 0 1px 0 rgba(0,0,0,0.05);
}

.pressed {
  padding: 16px;
  border-radius: 8px;
  background: #e5e7eb;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.25);
}

Shadow "Elevation" Reference

Feel	box-shadow value	বাংলায়
Subtle	`0 1px 3px rgba(0,0,0,0.08)`	খুব হালকা — যেন কাগজ সামান্য তুলে ধরা।
Card	`0 4px 12px rgba(0,0,0,0.10)`	সাধারণ কার্ডের জন্য standard পছন্দ।
Elevated / hover	`0 12px 30px rgba(0,0,0,0.15)`	hover-এ কার্ড আরও উঁচু মনে হয়।
Pressed / inset	`inset 0 2px 6px rgba(0,0,0,0.25)`	যেন বক্সটি ভেতরের দিকে চাপা পড়েছে।

6. Gradients — linear-gradient & radial-gradient

A gradient is a smooth transition between two or more colors, and it is technically a background-image value — no actual image file is involved. linear-gradient(direction, color1, color2, ...) transitions along a straight line; radial-gradient(color1, color2) radiates outward from a center point. Gradients are extremely common for hero banners and buttons.

Gradient হলো দুই বা ততোধিক রঙের মধ্যে একটি মসৃণ পরিবর্তন, এবং প্রযুক্তিগতভাবে এটি একটি background-image মান — কোনো আসল ইমেজ ফাইল লাগে না। linear-gradient(direction, color1, color2, ...) একটি সরলরেখা বরাবর পরিবর্তন হয়; radial-gradient(color1, color2) কেন্দ্র থেকে চারদিকে ছড়িয়ে পড়ে। Hero banner ও বাটনের জন্য gradient খুবই সাধারণ।

gradients.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Gradients</title>
</head>
<body>
  <div class="hero-banner">
    <h2>linear-gradient hero</h2>
  </div>
  <button class="glow-btn">radial-gradient button</button>
</body>
</html>

style.css

body { font-family: sans-serif; }

.hero-banner {
  height: 140px;
  border-radius: 10px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  background-image: linear-gradient(135deg, #39b549, #0d1f3c);
}

.glow-btn {
  padding: 12px 26px;
  border: none;
  border-radius: 999px;
  color: white;
  font-weight: 700;
  cursor: pointer;
  background-image: radial-gradient(circle at 30% 30%, #4ade80, #1f6e2a);
  box-shadow: 0 6px 16px rgba(57,181,73,0.4);
}

7. Where This Is Used (কোথায় ব্যবহৃত হয়)

Cards
box-shadow + border-radius দিয়ে product/profile card বানানো হয়।

Hero banners
cover size + gradient overlay দিয়ে ফুল-উইডথ ব্যানার তৈরি হয়।

Avatars
border-radius: 50% দিয়ে গোলাকার প্রোফাইল ছবি।

Buttons
gradient + shadow বাটনকে চাপ দেওয়ার মতো বাস্তব অনুভূতি দেয়।

Modals
elevated shadow দিয়ে বোঝানো হয় modal পেজের ওপরে ভাসছে।

Brand backgrounds
gradient দিয়ে কোম্পানির নিজস্ব রঙের পরিচয় তৈরি হয়।

8. Practice Problems

Every problem has a Show Answer button with real, runnable CSS. Try it yourself first.

প্রতিটি প্রশ্নের সাথে Show Answer বাটন আছে, যেখানে চালু-করার-যোগ্য CSS দেওয়া আছে। প্রথমে নিজে চেষ্টা করুন।

Give a <div> a light gray background-color, 16px padding, and a 10px border-radius.

একটি <div>-কে হালকা ধূসর background-color, 16px padding এবং 10px border-radius দিন।
✨ Show Answer (উত্তর দেখুন)
ans1.html
```
<div class="box">Rounded gray box</div>
```
style.css
```
.box {
  background-color: #e5e7eb;
  padding: 16px;
  border-radius: 10px;
}
```
Make a 60px by 60px square element into a perfect circle using border-radius.

border-radius ব্যবহার করে 60px বাই 60px একটি বর্গকে নিখুঁত বৃত্তে পরিণত করুন।
✨ Show Answer (উত্তর দেখুন)
ans2.html
```
<div class="circle"></div>
```
style.css
```
.circle {
  width: 60px;
  height: 60px;
  background: #39b549;
  border-radius: 50%;
}
```
In two sentences, explain the difference between background-size: cover and background-size: contain.

দুই বাক্যে ব্যাখ্যা করুন — background-size: cover এবং background-size: contain-এর মধ্যে পার্থক্য কী।

✨ Show Answer (উত্তর দেখুন)

Answer: cover scales the image up until it completely fills the box, cropping any part that doesn't fit. contain scales the image so the entire image is visible inside the box, which may leave empty space around it.

cover ছবিকে এত বড় করে যে এটি বক্সটি সম্পূর্ণ ভরে দেয়, প্রয়োজনে কিছু অংশ ক্রপ করে। contain ছবিকে এমনভাবে স্কেল করে যাতে পুরো ছবি বক্সের ভেতরে দেখা যায়, ফলে চারপাশে খালি জায়গা থাকতে পারে।
Add a soft box-shadow (0 4px 12px, 10% black) to a card, plus a slightly stronger shadow on :hover.

একটি কার্ডে হালকা box-shadow (0 4px 12px, 10% কালো) যোগ করুন, এবং :hover-এ একটু বেশি গাঢ় শ্যাডো দিন।
✨ Show Answer (উত্তর দেখুন)
ans4.html
```
<div class="card">Hover over me</div>
```
style.css
```
.card {
  padding: 20px;
  border-radius: 10px;
  background: white;
  box-shadow: 0 4px 12px rgba(0,0,0,0.10);
  transition: box-shadow 0.2s;
}

.card:hover {
  box-shadow: 0 12px 24px rgba(0,0,0,0.18);
}
```
Build a button with a linear-gradient background going from top-left to bottom-right, white text, and rounded corners.

একটি বাটন বানান যাতে top-left থেকে bottom-right দিকে linear-gradient background, সাদা টেক্সট এবং গোলাকার কোণা থাকবে।
✨ Show Answer (উত্তর দেখুন)
ans5.html
```
<button class="cta">Get Started</button>
```
style.css
```
.cta {
  padding: 12px 28px;
  border: none;
  border-radius: 8px;
  color: white;
  font-weight: 700;
  cursor: pointer;
  background-image: linear-gradient(135deg, #39b549, #1f6e2a);
}
```

Summary — Module 14

background-color and background-image fill the space behind your content, with background-size, background-position, and background-repeat controlling exactly how. border-radius softens or fully rounds corners. box-shadow and text-shadow add depth. Gradients are background images made of pure color — combine all of these and a plain box starts to look like a real, designed product.

background-color ও background-image কনটেন্টের পেছনের জায়গা ভরে দেয়, আর background-size, background-position, background-repeat ঠিক করে কীভাবে। border-radius কোণা নরম বা সম্পূর্ণ গোলাকার করে। box-shadow ও text-shadow গভীরতা যোগ করে। Gradient হলো বিশুদ্ধ রঙ দিয়ে তৈরি background image — এই সবগুলো একসাথে ব্যবহার করলেই একটি সাধারণ বক্স আসল প্রোডাক্টের মতো দেখতে শুরু করে।

Next Module → Display & Positioning — এলিমেন্ট ঠিক কোথায় এবং কীভাবে বসবে তা নিয়ন্ত্রণ করা।

Previous: Colors, Units & Typography Next: Display & Positioning