Learn CSS backgrounds, borders, shadows, gradients, and visual effects. Practical examples to help you design modern and clean UI styles.
CSS Backgrounds, Borders & Visual Effects Guide
In this lesson, you’ll learn how to make your UI visually rich and professional
using CSS backgrounds, borders, shadows, and effects .
These properties control how elements look, feel, and stand out.
Modern cards, buttons, hero sections, highlights, and glass effects
are built using backgrounds, borders, gradients, and shadows .
Info!
Good visuals improve UX, readability, and perceived quality of your website.
1. CSS Background Basics
The background family controls how the surface of an element looks.
You can use colors, images, gradients, or combine them.
background-color
Sets a solid background color.
✏️ Edit ▶ Run <!DOCTYPE html>
<html>
<head>
<style>
.box {
background-color: #dbeafe;
padding: 20px;
}
</style>
</head>
<body>
<div class="box">Simple background color</div>
</body>
</html>
2. background-image
Adds an image behind content.
By default, images repeat and start from the top-left.
Important b…
