CSS Outlines Shadows

CSS outlines and shadows help elements stand out. They are commonly used for buttons, form fields, cards, headings, and images.

• An outline draws a line outside an element's border.
• A box shadow adds a shadow around an element.
• A text shadow adds a shadow behind text.

CSS Outlines

An outline is a line drawn around an element. Unlike a border, it does not take up space or change the element's size.

button {
  outline: 2px solid blue;
}

An outline has three main properties:

button {
  outline-width: 2px;
  outline-style: solid;
  outline-color: blue;
}

Common outline styles include:

• solid
• dashed
• dotted
• double
• none

You can combine these values using the outline shorthand:

input {
  outline: 3px dashed orange;
}

Outline Offset

The outline-offset property controls the space between the outline and the element.

button {
  outline: 2px solid green;
  outline-offset: 4px;
}

A positive value moves the outline away from the element. A negative value moves it inward.

Outlines and Accessibility

Browsers usually show an outline when keyboard users focus on a link, button, or form field.

button:focus {
  outline: 3px solid #1f4ed8;
  outline-offset: 3px;
}

Avoid removing focus outlines without providing a clear replacement:

/* Avoid this */
button:focus {
  outline: none;
}

Visible focus styles help keyboard users understand which element is currently selected.

CSS Box Shadows

The box-shadow property adds a shadow around an element.

.card {
  box-shadow: 4px 4px 10px gray;
}

The values represent:

• Horizontal position
• Vertical position
• Blur amount
• Shadow colour

You can also include spread:

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

The 2px spread value makes the shadow larger.

Inner and Multiple Shadows

Use inset to place the shadow inside an element:

input {
  box-shadow: inset 0 2px 5px lightgray;
}

Multiple shadows can be separated with commas:

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

Use soft, subtle shadows for a clean design.

CSS Text Shadows

The text-shadow property adds a shadow behind text.

h1 {
  text-shadow: 2px 2px 4px gray;
}

Its values control:

• Horizontal position
• Vertical position
• Blur amount
• Shadow colour

Multiple text shadows are also possible:

h1 {
  text-shadow:
    1px 1px 2px black,
    0 0 8px blue;
}

Make sure the shadow does not reduce readability.