How to Create Callout Messages using CSS?

Last Updated : 23 Jul, 2025

Callout messages are used to highlight important information, tips, warnings, or notes in a visually distinctive way. They help in drawing attention to specific parts of a document or webpage. We will explore how to create various types of callout messages using CSS.

Preview Image

Approach

First create the basic structure using different HTML elements. Callout messages are styled to be fixed at the bottom right of the page with distinct headers and containers for different message types.
Messages start hidden with opacity and visibility transitions for smooth appearance and disappearance.
JavaScript functions showCallout and hideCallout control the display of messages, with automatic hiding after 3 seconds and manual closing via a button.
Buttons trigger the display of specific callout messages, each styled with appropriate colors and content for info, success, warning, and error notifications.

Example: The example below shows how to create callout messages using CSS.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0" 
          name="viewport">
    <title>Simple Website with Callout Message</title>
    <style>
        body {
            font-family: Arial, Helvetica, sans-serif;
            margin: 0;
            padding: 0;
        }

        .nav-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #2e2e2e;
            padding: 10px 20px;
            color: #fff;
        }

        .nav-bar img {
            max-width: 200px;
            display: block;
            margin: 0 auto;
        }

        .main-content {
            padding: 20px;
        }

        .alert-box {
            visibility: hidden;
            position: fixed;
            bottom: 35px;
            right: 20px;
            max-width: 300px;
            z-index: 1000;
            opacity: 0;
            transition: opacity 0.5s, visibility 0.5s, 
                          bottom 0.5s;
        }

        .alert-header {
            padding: 15px;
            background: #555;
            font-size: 20px;
            color: white;
            position: relative;
        }

        .alert-container {
            padding: 15px;
            background-color: #ccc;
            color: rgb(21, 20, 20);
        }

        .close-button {
            position: absolute;
            top: 5px;
            right: 15px;
            color: white;
            font-size: 20px;
            cursor: pointer;
        }

        .close-button:hover {
            color: lightgrey;
        }

        .alert-box.info .alert-header {
            background-color: #1e90ff;
        }

        .alert-box.show {
            visibility: visible;
            opacity: 1;
            bottom: 50px;
        }

        .alert-box.hide {
            opacity: 0;
            visibility: hidden;
            bottom: 35px;
            transition: opacity 0.5s, visibility 0.5s, 
                          bottom 0.5s;
        }
    </style>
</head>

<body>
    <nav class="nav-bar">
        <img src=
"https://media.geeksforgeeks.org/gfg-gg-logo.svg" 
             alt="Logo">
    </nav>

    <div class="main-content">
        <h2>Welcome to GFG</h2>
        <p>GeeksforGeeks is a leading online platform that
           provides computer science and programming 
           resources to millions of developers and 
           technology enthusiasts worldwide with a vast 
           library of courses, offline classroom programs,
           tutorials, articles, coding challenges, practice
           problems, & much more.
          </p>
        <p>Our goal is to provide you with the best content 
           and user experience. We hope you enjoy your time
           here and find everything you're looking for.
          </p>
    </div>

    <div id="callout" class="alert-box info">
        <div class="alert-header">
          Information
          </div>
        <span class="close-button" 
              onclick="hideCallout(this)">
          &times;
          </span>
        <div class="alert-container">
            <p>This is an informational message to 
               keep you updated with the latest news.
            </p>
        </div>
    </div>

    <script>
        function showCallout(type) {
            const callout = document.getElementById('callout');
            callout.classList.remove('hide');
            callout.classList.add(type);
            callout.classList.add('show');

            setTimeout(() => {
                hideCallout(callout);
            }, 3000);
        }

        function hideCallout(element) {
            const callout = element.closest('.alert-box');
            callout.classList.add('hide');
            setTimeout(() => {
                callout.classList
                         .remove('show', 'info', 'success',
                               'warning', 'error');
            }, 500);
        }

        // Automatically show callout on page load for demonstration
        window.onload = () => {
            showCallout('info');
        }
    </script>
</body>

</html>

Output:

CSS Introduction

ashishrew7vh

Improve

Article Tags :

How to Create Callout Messages using CSS?

Preview Image

Approach

Similar Reads

Thank You!

What kind of Experience do you want to share?