CSS Backgrounds, Borders & Visual Effects Guide

Images, gradients, shadows, and visual effects.

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.

<!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 background properties

background-repeat
background-position
background-size

<!DOCTYPE html>
<html>
<head>
<style>
.hero {
  height: 200px;
  background-image: url("https://cdn.maxoncodes.com/Css-background.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
  color: black;
  font-weight: bold;
}
</style>
</head>
<body>
<div class="hero">background-image</div>
</body>
</html>

Info!
The background-image property sets an image behind the content. By default, the image repeats and starts from the top-left corner.

<!DOCTYPE html>
<html>
<head>
<style>
.hero {
  height: 200px;
  background-image: url("https://cdn.maxoncodes.com/Css-background.webp");
  background-repeat: repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  color: black;
  font-weight: bold;
}
</style>
</head>
<body>
<div class="hero">background-repeat: repeat</div>
</body>
</html>

Info!
The background-repeat property controls whether the background image repeats.
Common values are repeat, no-repeat, repeat-x, and repeat-y.

<!DOCTYPE html>
<html>
<head>
<style>
.hero {
  height: 200px;
  background-image: url("https://cdn.maxoncodes.com/Css-background.webp");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
  color: black;
  font-weight: bold;
}
</style>
</head>
<body>
<div class="hero">background-size: contain</div>
</body>
</html>

Info!
The background-size property defines the size of the background image.
contain shows the full image, while cover fills the entire container.

<!DOCTYPE html>
<html>
<head>
<style>
.hero {
  height: 200px;
  background-image: url("https://cdn.maxoncodes.com/Css-background.webp");
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  color: black;
  font-weight: bold;
}
</style>
</head>
<body>
<div class="hero">background-position: right bottom</div>
</body>
</html>

Info!
The background-position property sets where the image appears inside the element.
Examples include center, top left, and right bottom.

<!DOCTYPE html>
<html>
<head>
<style>
.hero {
  height: 400px;
  background-image: url("https://cdn.maxoncodes.com/Css-background.webp");
  background-attachment: fixed;
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  color: black;
  font-weight: bold;
}
</style>
</head>
<body>
<div class="hero">background-attachment: fixed</div>
</body>
</html>

Info!
The background-attachment: fixed property keeps the background image fixed while the page content scrolls.

<!DOCTYPE html>
<html>
<head>
<style>
.hero {
  height: 200px;
  background-image: url("https://cdn.maxoncodes.com/Css-background.webp");
  background-color: rgba(255,0,0,0.5);
  background-blend-mode: multiply;
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  color: black;
  font-weight: bold;
}
</style>
</head>
<body>
<div class="hero">background-blend-mode: multiply</div>
</body>
</html>

Info!
The background-blend-mode property blends the background image with a color. It is often used to create overlay or visual effects.

Tip!
Use background-size: cover for responsive hero sections.

3. CSS Gradients

Gradients are generated by CSS, not images. They are sharp, lightweight, and responsive.

Linear Gradient

<!DOCTYPE html>
<html>
<head>
<style>
.gradient {
  padding: 30px;
  color: white;
  background: linear-gradient(135deg, #2563eb, #22c55e);
}
</style>
</head>
<body>

<div class="gradient">Linear Gradient Background</div>

</body>
</html>

Radial Gradient

<!DOCTYPE html>
<html>
<head>
<style>
.circle {
  padding: 40px;
  background: radial-gradient(circle, #fde68a, #f59e0b);
}
</style>
</head>
<body>

<div class="circle">Radial Gradient</div>

</body>
</html>

4. CSS Borders (Visual Boundaries)

Borders define the edge of an element and separate it visually.

Border properties

border-width
border-style
border-color

Border styles

Common styles include:

solid
dashed
dotted
double
groove
ridge
inset
outset

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.box {
  padding: 16px;
  text-align: center;
  font-weight: 600;
}

/* Border styles */
.solid   { border: 4px solid #ef4444; }
.dashed  { border: 4px dashed #ef4444; }
.dotted  { border: 4px dotted #ef4444; }
.double  { border: 6px double #ef4444; }
.groove  { border: 6px groove #ef4444; }
.ridge   { border: 6px ridge #ef4444; }
.inset   { border: 6px inset #ef4444; }
.outset  { border: 6px outset #ef4444; }
</style>
</head>
<body>

<div class="container">
  <div class="box solid">Solid</div>
  <div class="box dashed">Dashed</div>
  <div class="box dotted">Dotted</div>
  <div class="box double">Double</div>
  <div class="box groove">Groove</div>
  <div class="box ridge">Ridge</div>
  <div class="box inset">Inset</div>
  <div class="box outset">Outset</div>
</div>

</body>
</html>

border-radius

Rounds the corners of an element.

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}

.card {
  padding: 20px;
  background: #707276;
  text-align: center;
  font-weight: 600;
}

/* Border radius variations */
.r-all      { border-radius: 16px; }
.r-small    { border-radius: 6px; }
.r-large    { border-radius: 32px; }
.r-circle   { border-radius: 50%; height: 120px; }

.r-top      { border-radius: 16px 16px 0 0; }
.r-bottom   { border-radius: 0 0 16px 16px; }
.r-left     { border-radius: 16px 0 0 16px; }
.r-right    { border-radius: 0 16px 16px 0; }

.r-mixed    { border-radius: 4px 12px 24px 36px; }
.r-ellipse  { border-radius: 50% 20%; }
</style>
</head>
<body>

<div class="container">
  <div class="card r-all">All corners</div>
  <div class="card r-small">Small radius</div>
  <div class="card r-large">Large radius</div>
  <div class="card r-circle">Circle</div>

  <div class="card r-top">Top only</div>
  <div class="card r-bottom">Bottom only</div>
  <div class="card r-left">Left only</div>
  <div class="card r-right">Right only</div>

  <div class="card r-mixed">Mixed values</div>
  <div class="card r-ellipse">Elliptical</div>
</div>

</body>
</html>

5. CSS Shadows

box-shadow

Creates depth and elevation.

<!DOCTYPE html>
<html>
<head>
<style>
.card {
  padding: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,.15);
}
</style>
</head>
<body>

<div class="card">Floating Card</div>

</body>
</html>

text-shadow

Adds shadow to text for emphasis or readability.

<!DOCTYPE html>
<html>
<head>
<style>
.title {
  font-size: 32px;
  text-shadow: 2px 2px 6px rgba(0,0,0,.3);
}
</style>
</head>
<body>

<div class="title">Text Shadow Effect</div>

</body>
</html>

6. Visual Effects

opacity

Controls transparency of elements.

<!DOCTYPE html>
<html>
<head>
<style>
.fade {
  background: #22c55e;
  opacity: .6;
  padding: 20px;
}
</style>
</head>
<body>

<div class="fade">Semi transparent box</div>

</body>
</html>

filter

Applies visual effects like blur, grayscale, brightness.

<!DOCTYPE html>
<html>
<head>
<style>
img {
  filter: grayscale(100%);
}
</style>
</head>
<body>

<img src="https://picsum.photos/300/200" />

</body>
</html>

Common Mistakes

Using images instead of gradients
Overusing shadows and effects
Forgetting background-size for images
Using low contrast colors

What You Learned

How backgrounds work
How to use images and gradients
All major border styles
How shadows add depth
How to apply visual effects

Success! You can now design modern, visually polished UI components.

Next lesson: CSS Transforms, Transitions & Animations

Maxoncodes