Last Updated: 

Creating a Custom Disappearing Toast with HTML and CSS

Toasts are a popular UI element used to provide short, non-intrusive messages to users. They typically appear briefly on the screen and then disappear on their own. In this blog, we will explore how to create a custom disappearing toast using only HTML and CSS. This approach is lightweight and can be easily integrated into any web project without the need for additional JavaScript libraries in some basic cases.

Table of Contents#

  1. Fundamental Concepts
  2. Usage Methods
  3. Common Practices
  4. Best Practices
  5. Code Examples
  6. Conclusion
  7. References

Fundamental Concepts#

HTML Structure#

The HTML part of the custom toast is responsible for defining the basic structure. It usually consists of a container element that holds the message. This container is what will be styled and animated to create the toast effect.

CSS Styling#

CSS is used to style the toast container. This includes setting the background color, text color, border radius, and other visual properties. Additionally, CSS animations are used to control the appearance and disappearance of the toast.

CSS Animations#

CSS animations allow us to create smooth transitions over a specified period. For a disappearing toast, we typically use keyframes to define the start and end states of the animation. For example, we can start with an opacity of 1 (fully visible) and end with an opacity of 0 (fully hidden).

Usage Methods#

Embedding in a Web Page#

To use the custom toast, you need to add the HTML code for the toast container to your web page. Then, link the CSS file that contains the styling and animation rules. You can place the toast container anywhere in the HTML body, but it's common to position it at the top or bottom of the page.

Triggering the Toast#

In a basic HTML - CSS only approach, the toast can be set to appear as soon as the page loads. However, in more advanced scenarios where you want to trigger the toast based on user actions, you may need to combine with JavaScript. But for the purpose of this blog, we focus on the static appearance and disappearance.

Common Practices#

Positioning#

  • Top - centered: This is a common position for toasts. It's easily visible to the user without obstructing the main content. You can use CSS position: fixed along with top and left properties to center the toast at the top of the page.
  • Bottom-centered: Similar to the top-centered position, but placed at the bottom of the page. This can be useful when you want to avoid covering important content at the top.

Color Scheme#

  • Contrast: Ensure that there is enough contrast between the background color of the toast and the text color. This makes the message easy to read. For example, if you have a light-colored background, use a dark text color, and vice versa.

Best Practices#

Responsive Design#

Make sure the toast is responsive, meaning it looks good on different screen sizes. You can use relative units like percentages or em for sizing and positioning.

Animation Timing#

Choose appropriate animation durations. A very short animation may make the toast appear and disappear too quickly for the user to read the message, while a very long animation can be annoying. A duration of 2 - 5 seconds for the entire show-hide cycle is usually a good starting point.

Code Examples#

HTML#

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF - 8">
  <meta name="viewport" content="width=device-width, initial - scale=1.0">
  <link rel="stylesheet" href="toast.css">
  <title>Custom Disappearing Toast</title>
</head>
 
<body>
  <div class="toast">
    <p>This is a custom disappearing toast!</p>
  </div>
</body>
 
</html>

CSS (toast.css)#

.toast {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  opacity: 0;
  animation: fadeInOut 4s ease - in - out;
}
 
@keyframes fadeInOut {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

In this code, the .toast class defines the basic styling of the toast. The position: fixed positions the toast relative to the browser window, top and transform are used to center it at the top. The opacity is initially set to 0. The animation property applies the fadeInOut keyframe animation.

The fadeInOut keyframe animation starts with an opacity of 0, fades in to 1 at 10% of the animation duration, stays visible until 90%, and then fades out to 0 at the end.

Conclusion#

Creating a custom disappearing toast with HTML and CSS is a straightforward process that can enhance the user experience of your web application. By understanding the fundamental concepts, following common and best practices, and using the provided code examples, you can easily implement a simple yet effective toast message. While this basic implementation is static, it can be extended with JavaScript to trigger the toast based on user actions.

References#

2025-10