InnoMarts logo
InnoMarts
Fast websites
← Back to course

Backgrounds, Borders, and Shadows

Backgrounds, Borders, and Shadows

Welcome back.

In the previous lesson, you learned responsive design.

Your layout now understands phones.

Very good.

Today we make things look more polished.

Not overdecorated.

Not “I discovered 47 effects and used all of them before breakfast.”

Polished.

We will work with:

These are the small details that make a page feel finished.

Without them, a website can work perfectly but still look like it was designed during a power outage.

What You’ll Learn

In this lesson, you’ll learn:

Why Visual Polish Matters

CSS is not only about layout.

Layout decides where things go.

Visual polish decides how things feel.

A plain card works.

A polished card feels intentional.

Example:

.card {
  background-color: white;
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

This simple combination can make a section look modern and clean.

But be careful.

Too much shadow and too many borders can make your page look like a stack of floating plastic trays.

CSS gives power.

Use it like an adult.

Mostly.

Create the Project

Create a folder for this lesson:

mkdir css-lesson8
cd css-lesson8
touch index.html
touch style.css

You should have:

css-lesson8/
  index.html
  style.css

Open the folder in your editor.

We will build a small services page with cards and a hero section.

This is practical.

You can use this pattern for:

Basically, all the places where a website needs to stop looking like raw HTML wearing socks.

Write the HTML

Open index.html and add this:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Backgrounds, Borders, and Shadows</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header class="hero">
    <nav class="navbar">
      <h1 class="logo">PolishCSS</h1>

      <div class="nav-links">
        <a href="#">Home</a>
        <a href="#">Services</a>
        <a href="#">Projects</a>
        <a href="#">Contact</a>
      </div>
    </nav>

    <section class="hero-content">
      <p class="eyebrow">CSS Visual Design</p>
      <h2>Make Your Layout Feel Finished</h2>
      <p>
        Backgrounds, borders, and shadows help your page look cleaner, more structured, and more professional.
      </p>
      <a href="#" class="button">Explore Styles</a>
    </section>
  </header>

  <main class="page">
    <section class="intro-card">
      <h2>Small Details, Big Difference</h2>
      <p>
        Good visual details guide the user. They separate content, create depth, and make the page easier to understand.
      </p>
    </section>

    <section class="cards">
      <article class="card">
        <h2>Backgrounds</h2>
        <p>Use background colors, images, and gradients to create atmosphere.</p>
      </article>

      <article class="card featured">
        <h2>Borders</h2>
        <p>Use borders to separate content and highlight important areas.</p>
      </article>

      <article class="card">
        <h2>Shadows</h2>
        <p>Use shadows carefully to create depth without making everything float away.</p>
      </article>
    </section>
  </main>

  <footer class="site-footer">
    <p>Created while learning backgrounds, borders, and shadows.</p>
  </footer>
</body>
</html>

This gives us:

Now we can make it look less like a skeleton and more like a real webpage.

No disrespect to skeletons.

They do important work.

Start with Base CSS

Open style.css and add:

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #f3f4f6;
  color: #111827;
}

a {
  color: inherit;
  text-decoration: none;
}

This gives us a clean starting point.

The page has:

Now we can add the visual polish.

Slowly.

Like seasoning soup.

Not like dropping the entire salt container into it.

Background Color

The background-color property sets the background of an element.

Example:

body {
  background-color: #f3f4f6;
}

You can use it on sections:

.hero {
  background-color: #111827;
}

Add this:

.hero {
  background-color: #111827;
  color: white;
}

Now the hero has a dark background.

This creates contrast.

The hero feels like a strong opening section.

A good hero should say:

“Welcome.”

Not:

“I was accidentally placed here by HTML.”

Background Gradients

CSS can create gradients without images.

Example:

background: linear-gradient(135deg, #111827, #1e3a8a);

Add this to .hero:

.hero {
  background: linear-gradient(135deg, #111827, #1e3a8a);
  color: white;
}

Now the hero background moves from dark gray to blue.

Subtle gradients can look modern.

But do not overdo it.

A gradient should whisper.

Not arrive in sunglasses yelling “I am design!”

Style the Navbar

Add:

.navbar {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.logo {
  margin: 0;
  font-size: 24px;
}

.nav-links {
  display: flex;
  gap: 20px;
  font-weight: 700;
}

Now the navigation is aligned.

The logo is on the left.

The links are on the right.

This is familiar from previous lessons.

CSS is not always new chaos.

Sometimes it is old chaos wearing a better jacket.

Style the Hero Content

Add:

.hero-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 80px 24px 96px;
  text-align: center;
}

.eyebrow {
  margin: 0 0 16px;
  color: #bfdbfe;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.hero-content h2 {
  margin: 0 0 20px;
  font-size: 56px;
  line-height: 1.1;
}

.hero-content p {
  color: #dbeafe;
  font-size: 20px;
  line-height: 1.7;
}

The hero now has:

The letter-spacing gives the label a cleaner look.

Use it carefully.

Too much letter spacing makes words look like they are slowly walking away from each other.

Borders

Borders create visible separation.

Example:

.card {
  border: 2px solid #e5e7eb;
}

A border has:

Example:

border: 2px solid #e5e7eb;

You can use borders on cards, buttons, sections, and images.

Borders are useful.

But too many borders can make a design feel heavy.

A border should help the user understand structure.

Not make the page feel like a spreadsheet prison.

Border Radius

border-radius rounds corners.

Example:

.card {
  border-radius: 18px;
}

Add page and card styles:

.page {
  max-width: 1100px;
  margin: 40px auto;
  padding: 0 24px;
}

.intro-card {
  background-color: white;
  padding: 32px;
  border: 2px solid #e5e7eb;
  border-radius: 24px;
  margin-bottom: 24px;
}

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.card {
  background-color: white;
  padding: 28px;
  border: 2px solid #e5e7eb;
  border-radius: 24px;
}

Now the cards look softer and more modern.

Sharp corners are not wrong.

But rounded corners often feel friendlier.

Like the page had coffee and decided not to be aggressive.

Box Shadow

The box-shadow property adds shadow behind an element.

Example:

.card {
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

The values mean:

horizontal offset
vertical offset
blur
color

Example:

box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);

This means:

Add:

.intro-card,
.card {
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
}

Now the cards have subtle depth.

Subtle is the key word.

A shadow should support the design.

It should not look like the card is trying to escape Earth’s gravity.

Featured Card

Let us make one card stand out.

Add:

.featured {
  border-color: #2563eb;
  background-color: #eff6ff;
}

This gives the featured card:

Simple.

Clear.

Not screaming.

A featured element should be noticeable.

Not behave like it won a neon costume contest.

Button Styling

Now style the button.

Add:

.button {
  display: inline-block;
  background-color: white;
  color: #1e3a8a;
  padding: 14px 22px;
  border-radius: 999px;
  font-weight: 700;
  margin-top: 16px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.18);
}

.button:hover {
  transform: translateY(-2px);
}

This button has:

Hover effects can make buttons feel interactive.

But do not make them jump around like nervous frogs.

Small movement is enough.

Add Transitions

The hover movement will look better with transition.

Add:

.button,
.card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 35px rgba(0, 0, 0, 0.1);
}

Now cards lift slightly on hover.

This gives a nice interactive feel.

Again, keep it subtle.

If every card jumps dramatically, the page starts feeling like a trampoline park.

Fun for children.

Not always ideal for web design.

Complete CSS

Your style.css should look like this:

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #f3f4f6;
  color: #111827;
}

a {
  color: inherit;
  text-decoration: none;
}

.hero {
  background: linear-gradient(135deg, #111827, #1e3a8a);
  color: white;
}

.navbar {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.logo {
  margin: 0;
  font-size: 24px;
}

.nav-links {
  display: flex;
  gap: 20px;
  font-weight: 700;
}

.hero-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 80px 24px 96px;
  text-align: center;
}

.eyebrow {
  margin: 0 0 16px;
  color: #bfdbfe;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.hero-content h2 {
  margin: 0 0 20px;
  font-size: 56px;
  line-height: 1.1;
}

.hero-content p {
  color: #dbeafe;
  font-size: 20px;
  line-height: 1.7;
}

.button {
  display: inline-block;
  background-color: white;
  color: #1e3a8a;
  padding: 14px 22px;
  border-radius: 999px;
  font-weight: 700;
  margin-top: 16px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.18);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.button:hover {
  transform: translateY(-2px);
}

.page {
  max-width: 1100px;
  margin: 40px auto;
  padding: 0 24px;
}

.intro-card {
  background-color: white;
  padding: 32px;
  border: 2px solid #e5e7eb;
  border-radius: 24px;
  margin-bottom: 24px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
}

.intro-card h2,
.card h2 {
  margin-top: 0;
}

.intro-card p,
.card p {
  color: #4b5563;
  font-size: 18px;
  line-height: 1.7;
}

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.card {
  background-color: white;
  padding: 28px;
  border: 2px solid #e5e7eb;
  border-radius: 24px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 35px rgba(0, 0, 0, 0.1);
}

.featured {
  border-color: #2563eb;
  background-color: #eff6ff;
}

.site-footer {
  text-align: center;
  padding: 32px 24px;
  color: #6b7280;
}

@media (max-width: 800px) {
  .hero-content h2 {
    font-size: 42px;
  }

  .cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .navbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .nav-links {
    flex-direction: column;
    gap: 12px;
  }

  .hero-content {
    padding: 56px 20px 72px;
    text-align: left;
  }

  .hero-content h2 {
    font-size: 34px;
  }

  .hero-content p {
    font-size: 18px;
  }

  .cards {
    grid-template-columns: 1fr;
  }

  .intro-card,
  .card {
    padding: 24px;
  }
}

Save the file.

Refresh the browser.

You should now see:

The page should feel more complete.

Not because we added random decoration.

Because we used visual details with purpose.

That is the difference between design and throwing CSS confetti.

Common Mistakes

Too Much Shadow

Bad:

.card {
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}

This is too strong for a normal card.

It looks dramatic.

Too dramatic.

Like the card has a secret villain identity.

Better:

.card {
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
}

Small shadows are usually enough.

Too Many Borders

Borders are useful, but not everything needs one.

If every section, card, image, button, heading, and paragraph has a border, the page becomes noisy.

Use borders to clarify structure.

Not to cage every element like a tiny digital animal.

Bad Contrast

Do not put low-contrast text on colorful backgrounds.

Bad:

.hero p {
  color: #9ca3af;
}

on a dark blue background may be too weak.

Better:

.hero p {
  color: #dbeafe;
}

Readable first.

Pretty second.

Pretty but unreadable is just decorative confusion.

Practice

Create a services section with three cards.

Each card should have:

Make one card featured.

Use:

Keep the design clean.

Do not decorate everything like a birthday cake fighting a rainbow.

Mini Challenge

Create a pricing section with three plans:

Use:

Make it responsive:

This is a real landing page pattern.

You can reuse it for your own services.

Yes, this is useful.

CSS is finally paying rent.

Summary

Today you learned:

Good design is not about adding more.

It is about adding the right things.

A little shadow.

A clean border.

A good background.

Enough spacing.

That is often all you need.

CSS does not need to scream.

Sometimes it just needs to comb its hair.

Next Lesson

In the next lesson, we will learn transitions and simple animations.

We will make elements move smoothly.

Not like a circus.

Like a professional website with manners.