44 Awesome CSS Alert Message Box Design for your website or blog

- March 24, 2018
No doubt, a message box played an important part in regard of best user experience on a web page. There are some wonderful boxes I have designed to show different types of messages to users. These boxes can be used to show various kinds of notifications (i.e warning, success, error or info) on your web page.
To use these boxes, you have to install font awesome icons to your website/blog in order to show icons. Following are the scripts add them into your website &l;thead> tag.
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/solid.js" integrity="sha384-+Ga2s7YBbhOD6nie0DzrZpJes+b2K1xkpKxTFFcx59QmVPaSA8c7pycsNaFwUK6l" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/fontawesome.js" integrity="sha384-7ox8Q2yzO/uWircfojVuCQOZl+ZZBg2D2J5nkpLqzH1HY0C1dHlTKIbpRz/LG23c" crossorigin="anonymous"></script>

Awesome Alert Box

The following are simple & awesome css boxes that look like:
This is a informative text that's need your attention !
Oops ! This is an error text that's need your attention !
Congrats ! Successfully done ! text that's need your attention !
Warning ! consider this a warning message !

CSS Code:

 .info, .error, .success, .attention { 
     display: block;
     padding: 20px;
     margin: 10px; 
    }
.info {
     background: skyblue;  
     border-left: 10px solid #6666ff;
  }
.error {
       background: pink;
       border-left: 10px solid red;
       }  
.success {
     background: lightgreen;
     border-left: 10px solid green;
  }
.attention{
      background: #ffffb3;
      border-left: 10px solid orange;

HTML Code:

 
<div class="info"> 
<i style="color: #6666ff;" class="fas fa-info-circle "> </i>
This is a informative text that's need your attention ! 
</div>

<div class="error">
<i style="color: red;" class="fas fa-times-circle"> </i>
Oops ! This is an error text that's need your attention ! 
</div>
<div class="success">
<i style="color: green;" class="fas fa-check-circle"> </i>
Congrats ! Successfully done ! text that's need your attention ! 
</div>
<div class="attention">
<i style="color: orange;" class="fas fa-exclamation-circle"> </i>
Warning ! consider this a warning message ! 
</div>

Stunning Alert Message Box

The following are stunning css boxes that look like:

Keep in mind ! that this point is to be noted. This message needs your attention.

Keep in mind ! that this point is to be noted. This message needs your attention.

Keep in mind ! that this point is to be noted. This message needs your attention.

Keep in mind ! that this point is to be noted. This message needs your attention.

CSS Code:

.st-info, 
.st-error,
.st-attention, 
.st-success {
      padding: 15px;
      margin: 20px;
      border-radius: 3px;
      color: #333;
      box-shadow: 2px 2px 8px #404040;
      font-family: Arial;
      font-weight: bold;     
}
.st-info p, 
.st-error p,
.st-attention p, 
.st-success p {
       margin-left: 60px;
       margin-top: -5px; 
       }
.isize{
     font-size: 30pt; 
     position: absolute; 
     }
.st-attention {
      background: #ffffe6;
      border: 1px solid #ffff99;
      }
.st-info { 
      background: #BDEDFF;
      border: 1px solid #82CAFA;
      }
.st-error{
      background: #ffb3b3;
      border: 1px solid #ff4d4d;
      }
.st-success {
      background: #ccffcc;
      border: 1px solid #80ff80;
      }

HTML Code:

<div class="st-success">
<i style="color: green;" class="fas fa-check-circle isize">
<p>Keep in mind ! that this point is to be noted. This message needs your attention. 
 </p>
</div>
<div class="st-error">
<i style="color: red;" class="fas fa-times-circle isize"> </i>
<p>Keep in mind ! that this point is to be noted. This message needs your attention.
 </p>
</div>

<div class="st-attention"> 

<i style="color: orange;" class="fas fa-exclamation-triangle isize"> </i>
<p>Keep in mind ! that this point is to be noted. This message needs your attention.  </p>
</div> 

<div class="st-info">
<i style="color: #2554C7;" class="fas fa-info-circle isize"> </i>
<p>Keep in mind ! that this point is to be noted. This message needs your attention. 
</p>
</div>

CSS Creative Alert Message Box

The following boxes are creatively design that's are 10 degree rotated. They come back on hover, in order to read their text clearly, these notification boxes look like:
Congratulation ! You have successfully seen this alert message. It's an alert box to show successful operation.
Caution ! These alerts boxes are free to use on your blog/website. But you are restricted to sell, or republish.
CodeHim is a free website to provide designed HTML elements with CSS. You are viewing beautiful alert boxes. For more, keep visiting us.
Oops ! this is an error message. This is is creative error box that needs your attention.

CSS Code:

.creative-info, 
.creative-error, 
.creative-success, 
.creative-attention {
          padding: 13px;
          margin: 30px;
          max-width: 350px;
          transform: rotate(10deg);
       -webkit-transform: rotate(10deg);
        -moz-transform: rotate(10deg);
         display: block;
         transition: .4s;
         -webkt-transition: .4s;
        -moz-transition: .4s;
         font-family: Arial;
}
.creative-error{
        background: #ffb3bf;
        border: 2px solid #ff6680;
        color: #F62217;
}
.creative-success{
        background: #b3ffb3;
        border: 2px solid #80ff80;
        color: #006600;
}
.creative-info {
           background: #CCFFFF;
           border: 2px solid #7DFDFE;
           color: #157DEC;
 }
.creative-attention {
           background: #ffffb3;
           border: 2px solid #ffff66;
           color: #cc8500;
 }
.fas {font-size: 18pt;}
.creative-info:hover,
.creative-error:hover,
.creative-success:hover,
.creative-attention:hover {
          transform: rotate(0deg);
       -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        }

HTML Code:

<div class="creative-success">
<i class="fas fa-check-circle">
Congratulation ! You have successfully seen this alert message. It's an alert box to show successful operation. 
</div>
<div class="creative-attention">
<i class="fas fa-exclamation-circle"> </i>
Caution ! These alerts boxes are free to use on your blog/website. But you are restricted to sell, or republish.
</div>
<div class="creative-info">
<i class="fas fa-exclamation-circle"> </i>
CodeHim is a free website to provide designed HTML elements with CSS. You are viewing beautiful alert boxes. For more, keep visiting us.
</div>
<div class="creative-error"> 
<i class="fas fa-times-circle"> </i>
Oops ! this is an error message. This is is creative error box that needs your attention.
</div>

Close Able Alert Messages

The following are simple, and user friendly alert boxes with close button, you can easily hide any box by clicking on red cross button. These are perfect to show any type of message without annoying user.
Click on the close button to close this alert box.
OOPS ! This is an error alert message !
Keep in Mind ! This is an alert message for information !
Congrats ! This is an alert message for successful operation !
Attention ! This is an alert message for your attention !

CSS Code:

/*Closeable alert boxes design with heart by codehim.com */
.alert-box {
        max-width: 650px;
        padding: 20px;
        background-color: #f2f2f2; 
        font-family: Arial;
        border: 1px solid #ccc;
        border-radius: 4px;
        margin: 15px;
}
.alert-box:hover{
        font-weight: bold;
}
.error{ color: #cc0000;}
.info { color: #0099e6;}
.attention {color:  #e67300;}
.success {color:#006600;}
.close-btn{ 
        background: #e60000;
        margin-left: 15px;
        font-family: Arial;
        border: none;
        border-radius: 3px;
        padding: 3px;
        color: #fff;
        font-weight: bold;
        font-size: 14pt;
        float: right;
        line-height: 16px;
        cursor: pointer;
        transition: .5s;
       -webkit-transition: .5s;
       -moz-transition: .5s;
}
.close-btn:hover{ 
        background:  #ff4d4d; 
        box-shadow: 4px 4px 30px  rgb(255, 0, 0);
}

HTML Code:

<div class="alert-box error">
<span class="close-btn" onclick="this.parentElement.style.display='none';"> ✖ </span>
<i class="fas fa-times-circle"> </i>
OOPS ! This is an error alert message !
</div>

<div class="alert-box info">
<span class="close-btn" onclick="this.parentElement.style.display='none';"> ✖ </span>
<i class="fas fa-info-circle"> </i>
Keep in Mind ! This is an alert message for information !
</div>

<div class="alert-box success">
<span class="close-btn" onclick="this.parentElement.style.display='none';"> ✖ </span>
<i class="fas fa-check-circle"> </i>
Congrats ! This is an alert message for successful operation !
</div>

<div class="alert-box attention">

<span class="close-btn" onclick="this.parentElement.style.display='none';"> ✖ </span>

<i class="fas fa-exclamation-circle"> </i>
Attention ! This is an alert message for your attention !
</div>

Awesome Close Able Notice Box

OOPS ! This is an error alert message !
Keep in Mind ! This is an alert message for information !
Congrats ! This is an alert message for successful operation !
Attention ! This is an alert message for your attention !

CSS Code:

/*Best Alert Box design by www.codehim.com */
.best-alert-box {
        padding: 20px;
        background-color: #f2f2f2; 
        font-family: Arial;
        margin: 15px;
        color: #4d4d4d;
}
.b-error{ background:rgb(255, 230, 230);}
.b-info {  background: rgb(230, 247, 255);}
.b-attention { background: rgb(255, 235, 204);}
.b-success { background: rgb(230, 255, 230);}
.best-close-btn{ 
        background: #e60000;
        margin-left: 15px;
        font-family: Arial;
        border: none;
        padding: 3px;
        color: #fff;
        font-weight: bold;
        font-size: 14pt;
        float: right;
        line-height: 16px;
        cursor: pointer;
        transition: .5s;
       -webkit-transition: .5s;
       -moz-transition: .5s;
}
.best-close-btn:hover{ 
        background:  #fff; 
        color: #e60000;
        transform: rotate(90deg);
     -webkit-transform: rotate(90deg);
     -moz-transform: rotate(90deg);
}

HTML Code:

<div class="best-alert-box b-error">
<span class="best-close-btn" onclick="this.parentElement.style.display='none';"> ✖ </span>
<i class="fas fa-times-circle"> </i>
OOPS ! This is an error alert message !
</div>

<div class="best-alert-box b-info">
<span class="best-close-btn" onclick="this.parentElement.style.display='none';"> ✖ </span>
<i class="fas fa-info-circle"> </i>
Keep in Mind ! This is an alert message for information !
</div>

<div class="best-alert-box b-success">
<span class="best-close-btn" onclick="this.parentElement.style.display='none';"> ✖ </span>
<i class="fas fa-check-circle"> </i>
Congrats ! This is an alert message for successful operation !
</div>

<div class="best-alert-box b-attention">

<span class="best-close-btn" onclick="this.parentElement.style.display='none';"> ✖ </span>

<i class="fas fa-exclamation-circle"> </i>
Attention ! This is an alert message for your attention !
</div>

Alert Box with Rounded Corner

The following is the beautiful set of boxes with rounded corners.
This is a informative text that's need your attention !
Oops ! This is an error text that's need your attention !
Congrats ! Successfully done ! text that's need your attention !
Caution ! This is attention message ! text that's need your attention !

CSS Code:

 
.info-r, 
.error-r, 
.success-r, 
.attention-r { 
     display: block;
     padding: 30px;
     margin: 20px;
     box-shadow: 3px 3px 10px #4d4d4d;
     font-weight: bold;
     border-radius: 12px;
    }
.info-r {
     background: skyblue;  
     border: 1px solid #6666ff;
     color: #6666ff;     
  }
.error-r {
       background: pink;
       border: 1px solid red;
       color: red;
       }  
.success-r {
     background: lightgreen;
     border: 1px solid green;
     color: green;
  }
.attention-r{
      background: #ffffb3;
      border: 1px solid orange;
      color: orange;

HTML Code:

<div class="info-r">
<i style="color: #6666ff;" class="fas fa-info-circle "> </i>
This is a informative text that's need your attention ! 
</div>

<div class="error-r">
<i style="color: red;" class="fas fa-times-circle"> </i>
Oops ! This is an error text that's need your attention ! 
</div>
<div class="success-r">
<i style="color: green;" class="fas fa-check-circle"> </i> Congrats ! Successfully done ! text that's need your attention ! 
</div>
<div class="attention-r">
<i style="color: orange;" class="fas fa-exclamation-circle"> </i>
Caution ! This is attention message ! text that's need your attention ! 
</div>

Professional Message Boxes

The following set provide smaller text, Hover to read bold and larger text.
Info Message
This is a informative message alert box. Hover to see larger text.
Error Alert Box
This is a an error message alert box. That needs user attention.
Attention Alert Box
This is a attention message alert box. Designed with heart by codehim.com
Success Alert Box
You have successfully reached to see this message. I hope, you are finding best design here.

CSS Code:

/* ////Best professional alert boxes 
Design with heart by www.codehim.com /////*/
.ticket-info, 
.ticket-error,
.ticket-attention,
.ticket-success {
            padding: 12px;
            margin: 15px;
            font-family: Arial;
            border: 1px solid #e6e6e6;
            color: #666;
            font-size: 9pt;
            background: #fff;
            transition: .4s;
          -webkit-transition: .4s;
          -moz-transition: .4s;
           }
.ticket-info:hover, 
.ticket-error:hover,
.ticket-attention:hover,
.ticket-success:hover {
           box-shadow: 4px 4px 10px #999;
           font-size: 12pt;
           font-weight: bold;      
          }
.ticket-info h5, 
.ticket-error h5,
.ticket-attention h5,
.ticket-success h5 {
             font-weight: bold;
             font-size: 14pt;
             margin:0 0 12px;
             padding: 0;
}
.ticket-info h5 span, 
.ticket-error h5 span,
.ticket-success h5 span,
.ticket-attention h5 span {
            color: #fff;
            padding:6px 10px 3px 10px;
            display:inline-block;
            text-transform:uppercase;
            vertical-align:middle} 
.ticket-info h5{
            border-bottom: 8px solid #77BFC7;
            }
.ticket-info h5 span{
             background: #77BFC7;
             }
.ticket-error h5 span{
             background: #E42217;
             }
.ticket-success h5 span{
             background: #3EA055;
             }
.ticket-attention h5 span{
             background: #F88017;
             }
.ticket-error h5{
             border-bottom: 8px solid #E42217;
             }
.ticket-attention h5{
             border-bottom: 8px solid #F88017;
             }
.ticket-success h5 {
             border-bottom: 8px solid #3EA055;
             }

HTML Code:

<div class="ticket-info">
<h5>
<span>
<i class="fas fa-info-circle"> </i>
 Info Message Box </span>
</h5>
write your info message here....
</div>

<div class="ticket-error">
<h5>
<span>
<i class="fas fa-times-circle"> </i> Error Alert Box </span>
</h5>
write your error notice here....
</div>

<div class="ticket-attention">
<h5> <span>
<i class="fas fa-exclamation-circle"> </i> Warning Alert Box </span>
</h5>
write your warning message here....
</div>

<div class="ticket-success">
<h5>
<span>
<i class="fas fa-check-circle"> </i> Success Alert Box </span> </h5>
write your success notice here....
</div>

Black And White Alert Boxes

As I saw, there are some websites and blogs haven't any color combination, for black & white themes, these box models are perfect:
This is a informative text that's need your attention !
Oops ! This is an error text that's need your attention !
Congrats ! Successfully done ! text that's need your attention !
Caution ! This is attention message ! text that's need your attention !

CSS Code:

/*black n white blog/website alert message box css. design with heart by codehim.com*/
.bw-info,
.bw-error,
.bw-attention,
.bw-success{
           padding: 14px;
           margin: 10px;
           font-family: Arial;
           font-size: 10pt;
           font-weight: bold;
           border: 1px solid #999;
           border-radius: 4px;
           }
.bw-info{
           background: #d9d9d9;
           color: #333;
           }
.bw-error{
           background: #262626;
           color: f2f2f2; }
.bw-success {
           background: #1a1a1a;
           color: f2f2f2; }
.bw-attention{
           background: #f2f2f2;
           color: #1a1a1a;}

HTML Code:

<div class="bw-info">
<i class="fas fa-info-circle "> </i>
place for your info message.....
</div>

<div class="bw-error">
<i class="fas fa-times-circle"> </i>
place for your error text....
</div>
<div class="bw-success">
<i class="fas fa-check-circle"> </i> 
place for your successful operation...
</div>
<div class="bw-attention">
<i class="fas fa-exclamation-circle"> </i>
place for your warning message....
</div>

Simple Alert Message Box Design

However, the following are simply design, the quality of this set is that it has deep color combination and it's text has shadow property.
This is a informative text that's need your attention !
Oops ! This is an error text that's need your attention !
Congrats ! Successfully done ! text that's need your attention !
Caution ! This is attention message ! text that's need your attention !

CSS Code:

.simple-info, .simple-error, .simple-attention, .simple-success {
      padding: 30px;
      margin: 12px;
      color: #fff;
      font-weight: bold;
      text-shadow: 1px 1px 1px #000;
      display: block;     
}
.simple-info{
       background: #4d4dff;      
}
.simple-error {
       background: #ff0000;
}
.simple-success{
       background: #008000;
}
.simple-attention{
       background: #ffa500;
}

HTML Code:

<div class="simple-info">
<i style="color: #fff;" class="fas fa-info-circle"> </i>
your informative text goes here.....
</div>

<div class="simple-error">
<i style="color: #fff;" class="fas fa-times-circle"> </i>
your error message goes here....
</div>
<div class="simple-success">
<i style="color: #fff;" class="fas fa-check-circle"< </i>
your success message goes here....
</div>
<div class="simple-attention">
<i style="color: #fff;" class="fas fa-exclamation-circle"> </i>
your warning message goes here.....
</div>

Alert Circle Message

A unique design, did you ever seen on any website? You can use these circle design to show any kind of notification.

This is a informative text that's need your attention !
Oops ! This is an error text that's need your attention !

Congrats ! Successfully done ! text that's need your attention !

Caution ! This is attention message ! text that's need your attention !

CSS Code:

.info-circle, 
.error-circle, 
.success-circle, 
.attention-circle { 
    display: inline-block;
     padding: 35px;
     margin: 10px;
     width: 160px;
     height: 160px;
     border-radius: 50%;
     text-transform: uppercase;
     text-align: center;
     overflow: hidden;
     box-shadow: 5px 5px 15px #808080;
     color: #1a1a1a;
    }
.info-circle {
     background: #b3b3ff;  
     border: 10px solid #ccccff;
  }
.error-circle {
       background: pink;
       border: 10px solid #ffe6ea;
       }  
.success-circle {
     background: #99ff99;
     border: 10px solid #ccffcc;
  }
.attention-circle {
      background: #ffffb3;
      border: 10px solid #ffffcc;

HTML Code:

<div class="info-circle"> 
<i style="color: blue; font-size: 42pt;" class="fas fa-info"> </i>
<br />
This is a informative text that's need your attention ! 
</div>
<div class="error-circle">
<i style="color: red; font-size: 42pt; " class="fas fa-times"> </i>
<br />
Oops ! This is an error text that's need your attention ! 
</div>
<div class="success-circle"> 
<i style="color: green; font-size: 42pt; " class="fas fa-check"> </i> 
<br />
Congrats ! Successfully done ! text that's need your attention ! 

</div>
<div class="attention-circle"> 
<i style="color: orange; font-size: 42pt; " class="fas fa-exclamation"> </i>
<br />
Caution ! This is attention message ! text that's need your attention ! 
</div>

Dashed Rectangle CSS Box

The following is a simple set of rectangular box with dashed border:
This is a informative text that's need your attention !
Oops ! This is an error text that's need your attention !
Congrats ! Successfully done ! text that's need your attention !
Caution ! This is attention message ! text that's need your attention !

CSS Code:

.d-info, 
.d-error, 
.d-attention, 
.d-success {
      background: #e6e6e6;
      padding: 30px;
      margin: 20px;
      color: #333;
      font-weight: bold;
      display: block;
}
.d-info{
       border: 2px dashed #4d4dff;   
}
.d-error {
       border: 2px dashed #ff0000;
}
.d-success{
       border: 2px dashed #008000;
}
.d-attention{
       border: 2px dashed #ffa500;
}

HTML Code:

<div class="d-info"> 
<i style="color: #6666ff;" class="fas fa-info-circle "> </i>
This is a informative text that's need your attention ! 
</div>

<div class="d-error">
<i style="color: red;" class="fas fa-times-circle"> </i>
Oops ! This is an error text that's need your attention ! 
</div>
<div class="d-success">
<i style="color: green;" class="fas fa-check-circle"> </i> Congrats ! Successfully done ! text that's need your attention ! 
</div>
<div class="d-attention">
<i style="color: orange;" class="fas fa-exclamation-circle"> </i>
Caution ! This is attention message ! text that's need your attention ! 
</div>