Error, Success, Warning, and Info Messages with CSS

This is how to show message alert notification boxes styled with CSS. First copy the CSS, then use the HTML to show whichever notification message you want to show. This page has the HTML for eight different styles of notifications.

Accessible color contrast is level AAA for all of these alert boxes. These box colors pass the WCAG Level AAA with a contrast ratio of at least 7:1.

The style of these message boxes doesn’t have a box-shadow, but if you prefer a box-shadow, see the variations below. There is also a variation for the info icon; you can use just the little “i” instead of the little “i” with a circle around it (icons are pure CSS).

To use message notification boxes, use this CSS:

CSS

.alert {
  padding: 12px 10px 9px;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.alert.alert-shadow {
  box-shadow: 0 1px 6px rgba(32, 33, 36, 0.28);
  border-radius: 8px;
}
.alert-primary {
  color: #004085;
  background-color: #cce5ff;
  border-color: #b8daff;
}
.alert-secondary {
  color: #383d41;
  background-color: #e2e3e5;
  border-color: #d6d8db;
}
.alert-info {
  color: #07525e;
  background-color: #d1ecf1;
  border-color: #bee5eb;
}
.alert-info-icon {
  color: #00516f;
  background-color: #d9edf7;
  border-color: #bee5eb;
  display: flex;
  align-items: baseline;
}
.alert-success {
  color: #125522;
  background-color: #d4edda;
  border-color: #c3e6cb;
  display: flex;
  align-items: baseline;
}
.alert-success .alert-link {
  color: #0b2e13;
}
.alert-success:before {
  content: "\2714";
  padding-right: 16px;
}
.alert-warning {
  color: #6a4d00;
  background-color: #fff3cd;
  border-color: #ffeeba;
}
.alert-error {
  color: #900000;
  background: #ffd2d2;
  border-color: #f1a899;
}
.alert-super-error {
  color: #fff;
  background-color: #ae0000;
  font-weight: 600;
}
.alert-link {
  font-weight: 700;
  text-decoration: underline;
}
.alert-primary a {
  color: #002752;
}
.alert-secondary a {
  color: #202326;
}
.alert-info a,
.alert-info-icon a {
  color: #062c33;
}
.alert-success a {
  color: #0b2e13;
}
.alert-warning a {
  color: #533f03;
}
.alert-error a {
  color: #900000;
}
.alert-super-error a {
  color: #fff;
}
.alert-success p,
.alert-info-icon p {
  margin-top: 0;
  margin-bottom: 0;
}
.alert-info-icon:before {
  padding-right: 16px;
  content: '\24D8';
}

The HTML To Show The Message Boxes:

In each sample, replace line 2 with your own message.

1. Pink Error Alert Box

No shadow:

To show it, use this HTML:

HTML

<div class="alert alert-error" role="alert">
    This is an ERROR alert with <a href="#" class="alert-link">an example link</a>.
</div>

With box shadow:

To show it, use this HTML:

HTML

<div class="alert alert-shadow alert-error" role="alert">
    This is an ERROR alert with <a href="#" class="alert-link">an example link</a> and a shadow around the box.
</div>

2. Red Super Error Alert Box:

No shadow:

To show it, use this HTML:

HTML

<div class="alert alert-super-error" role="alert">
    This is a SUPER ERROR alert with <a href="#" class="alert-link">an example link</a>.
</div>

With box shadow:

To show it, use this HTML:

HTML

<div class="alert alert-shadow alert-super-error" role="alert">
    This is a SUPER ERROR alert with <a href="#" class="alert-link">an example link</a>.
</div>

3. Yellow Warning-message Box:

No shadow:

To show it, use this HTML:

HTML

<div class="alert alert-warning" role="alert">
    This is a warning alert with <a href="#" class="alert-link">an example link</a>.
</div>

With box shadow:

To show it, use this HTML:

HTML

<div class="alert alert-shadow alert-warning" role="alert">
    This is a warning alert with <a href="#" class="alert-link">an example link</a>.
</div>

4. Blue Primary Alert Box:

No shadow:

To show it, use this HTML:

HTML

<div class="alert alert-primary" role="alert">
    This is a primary alert with <a href="#" class="alert-link">an example link</a>. This alert box has no icon.
</div>

With box shadow:

To show it, use this HTML:

HTML

<div class="alert alert-shadow alert-primary" role="alert">
    This is a primary alert with <a href="#" class="alert-link">an example link</a>. This alert box has no icon.
</div>

5. Lighter Blue Info Alert-message Box, No icon:

No shadow:

To show it, use this HTML:

HTML

<div class="alert alert-info" role="alert">
    This is a info alert with <a href="#" class="alert-link">an example link</a>. This "info" alert box has no icon, but if you want an "info" alert box with an icon, use the next box below.
</div>

With box shadow:

To show it, use this HTML:

HTML

<div class="alert alert-shadow alert-info" role="alert">
    This is a info alert with <a href="#" class="alert-link">an example link</a>. This "info" alert box has no icon, but if you want an "info" alert box with an icon, use the next box below.
</div>

6. Blue Info Alert-message Box With “info” icon:

No shadow:

To show it, use this HTML:

(Note: because of the icon, this one needs the text to be wrapped in paragraph tags. This uses pure CSS to display the icon.)

HTML

<div class="alert alert-info-icon">
  <p>
    This is the info message. You can also add HTML here. <strong>Bold</strong>. This is <a href="#" class="alert-link">a link</a>
  </p>
</div>

With box shadow:

To show it, use this HTML:

(Note: because of the icon, this one needs the text to be wrapped in paragraph tags. This uses pure CSS to display the icon.)

HTML

<div class="alert alert-shadow alert-info-icon">
   <p>
      This is the info message. You can also add HTML here. <strong>Bold</strong>. This is <a href="#" class="alert-link">a link</a>
   </p>
</div>

7. Gray Secondary Alert Box:

No shadow:

To show it, use this HTML:

HTML

<div class="alert alert-secondary" role="alert">
    This is a secondary alert with <a href="#" class="alert-link">an example link</a>.
</div>

With box shadow:

To show it, use this HTML:

HTML

<div class="alert alert-shadow alert-secondary" role="alert">
    This is a secondary alert with <a href="#" class="alert-link">an example link</a>.
</div>

8. Green Success-message Box:

No shadow:

To show it, use this HTML:

(Note: because of the icon, this one needs the text to be wrapped in paragraph tags. This uses pure CSS to display the icon.)

HTML

<div class="alert alert-success" role="alert"><p>
This is a SUCCESS alert within p tags with <a href="#" class="alert-link">an example link</a>. THIS success alert box has an icon.
</p></div>

With box shadow:

To show it, use this HTML:

(Note: because of the icon, this one needs the text to be wrapped in paragraph tags. This uses pure CSS to display the icon.)

HTML

<div class="alert alert-shadow alert-success" role="alert"><p>
This is a SUCCESS alert within p tags with <a href="#" class="alert-link">an example link</a>. THIS success alert box has an icon.
</p></div>

Style Variations

• CSS Style Variation: More Rounded Corners

  If you want your message boxes to have more rounded corners, replace line 5 in the CSS code above with this:

  border-radius:.5em;

• CSS Style Variation: Square Corners

  If you want your message boxes to have completely square corners, replace line 5 in the CSS code above with this:

  border-radius: 0;

• CSS Style Variation: Info Icon of Small Letter ‘i’

  The info icon used above is the letter ‘i’ with a circle around it. If you prefer to instead use the icon that’s just the little “i” and no circle, which looks like this: ℹ

  To use this info icon, in the CSS code above near the very end, replace this line:

  content: '\24D8';

  with this:

  content: '\2139';