CSS Backgrounds & Shadows Tutorial: 7 Essential Effects

Welcome to this CSS backgrounds and shadows tutorial. These properties are what give a webpage visual depth — images behind sections, rounded corners, and soft shadows that make elements feel like they’re lifted off the page.

This is Tutorial 4 of 10 in our complete CSS series on Tutorials Ocean’s CSS category. If you missed it, check out Tutorial 3: Typography, Fonts & Google Fonts first.

Background Color & Background Image

Every CSS backgrounds and shadows tutorial starts with the basics — setting a solid color or an image behind an element.

div {
    background-color: #f0f0f0;
}

.hero {
    background-image: url('hero.jpg');
}

You can also combine both — the color acts as a fallback if the image fails to load, or shows through any transparent areas of the image.

Controlling Background Size & Position

.hero {
    background-image: url('hero.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

The combination of background-size: cover with background-position: center is the most common pattern for full-width hero images, and appears in almost every real-world CSS backgrounds and shadows tutorial.

CSS Gradients

Instead of a flat color or an image, you can use a gradient as a background.

.banner {
    background: linear-gradient(to right, #ff6a00, #ee0979);
}

.circle {
    background: radial-gradient(circle, #ffffff, #000000);
}

linear-gradient blends colors in a straight line (you control the direction), while radial-gradient blends colors outward from a center point. Gradients are widely used for buttons, banners, and hero sections.

Border Basics

div {
    border-width: 2px;
    border-style: solid;
    border-color: #333333;
}

/* Shorthand version */
div {
    border: 2px solid #333333;
}

Rounded Corners with border-radius

.card {
    border-radius: 12px;
}

.avatar {
    border-radius: 50%;
}

A small radius like 8-12px gives a modern, softened card look. Setting border-radius: 50% on a square element turns it into a perfect circle — the standard trick for profile picture avatars in any CSS backgrounds and shadows tutorial.

For the full official reference, check the MDN documentation on border-radius.

Box Shadows

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

Subtle shadows like this one are what make cards, buttons, and modals feel like they’re floating slightly above the page — a small detail that makes a big visual difference.

Practice Exercise

Open the style.css file from Tutorial 3 and expand it with backgrounds and shadows.

Requirements:

1. Add a background-color to your page’s body
2. Create a “card” style class with a background-color, border-radius, and box-shadow
3. Add a linear-gradient background to one section or button
4. Add a solid border to one element, then experiment with dashed or dotted on another
5. Turn one image element into a circle using border-radius: 50%

Bonus challenge: Add a hover effect that increases the box-shadow size when the user hovers over your card (we’ll cover the :hover selector fully, but you can try it now using what you already know).

Save your file, refresh your browser, and see how much depth these small changes add to your design.

What’s Next?

This completes Tutorial 4 of our CSS backgrounds and shadows tutorial series. In Tutorial 5, we’ll cover CSS display and position — the properties that control how elements behave and where they sit on the page.

This CSS backgrounds and shadows tutorial is part of the complete CSS series on Tutorials Ocean — practical, beginner-friendly web development tutorials. Follow along and build real projects as you learn.