CSS Shadows & Outlines

Adding shadows and outlines to elements can dramatically improve a website’s design. These properties help highlight key content, create visual depth, and guide user attention—especially useful in cards, buttons, and form inputs.

Box Shadows

The box-shadow property allows you to apply drop shadows to any HTML element (e.g., <div>, <button>, <img>). It can simulate depth, hover effects, or even soft borders.

Syntax:

				
					box-shadow: h-offset v-offset blur spread color inset;

What Each Value Means:

h-offset: Horizontal shift (right if positive, left if negative)
v-offset: Vertical shift (down if positive, up if negative)
blur: Softens the shadow’s edges (higher = more blur)
spread: Increases/decreases shadow size
color: Sets the shadow color
inset (optional): Applies the shadow inside the box

Soft Outer Shadow

				
					<style>
  .shadow-box {
    width: 250px;
    padding: 20px;
    margin: 50px auto;
    background-color: #fff;
    box-shadow: 6px 6px 20px rgba(0, 0, 0, 0.2);
    font-family: sans-serif;
    text-align: center;
  }
</style>

<div class="shadow-box">
  Box with subtle shadow
</div>

Inner Shadow

				
					box-shadow: inset 3px 3px 10px rgba(0, 0, 0, 0.2);

This makes the shadow appear inside the element.

Text Shadows

The text-shadow property adds a shadow behind text to enhance readability or visual effect.

Syntax:

				
					text-shadow: h-offset v-offset blur-radius color;

Example:

				
					<style>
  .glow-text {
    font-size: 40px;
    color: #222;
    text-shadow: 2px 2px 6px rgba(255, 165, 0, 0.6);
  }
</style>

<h2 class="glow-text">Learn With Arshyan</h2>

This creates a glowing orange effect behind the text.

Outlines

The outline property draws a line around the outside of an element’s border. It’s commonly used for keyboard navigation and focus indicators, especially in form elements and buttons.

Syntax:

				
					outline: width style color;

Outline vs Border

Feature	`border`	`outline`
Takes up space?	Yes	No
Follows shape?	Supports `border-radius`	No rounded corners
Offsets available?	No	Yes, with `outline-offset`
Useful for?	Layout, styling	Accessibility, highlighting focus

Outline Offset

				
					input:focus {
  outline: 2px solid #0a74da;
  outline-offset: 4px;
}

This separates the outline slightly from the edge of the input box.

Summary Table

Property	Purpose
`box-shadow`	Adds shadows around a box or element
`text-shadow`	Adds shadows behind text
`outline`	Highlights the outside of an element
`outline-offset`	Adds space between element and outline

Learn With Arshyan Tip:

Use shadows and outlines subtly. Too much can clutter your UI. For best results, pair them with hover effects or form focus states to improve user interaction.