Start Here
Introduction
Download
Syntax
Core Concepts
Aspect Ratio
Border Radius
Border Size
Border Style
Cursor
Display
Flex
Flex Alignment
Flex Direction
Flex Grow
Flex Position
Flex Size
Flex Width
Font
Gap
Height
Margin
Padding
Spacing
Width
UI Effects
Animations
Single Box
Multi Box
3D Box
Other
Box Shadows
OutSet Shadow
InSet Shadow
Text Shadow
OutSet Shadow
InSet Shadow
UI Widgets
Accordion
Buttons
Calendar
Card
Checks & Radio
Data Tables
DropDown
DropDown Multi Select
Gallery
Pagination
Pop-Up
Progress Bar
Skeleton
Spinners
Suggestion
Tabs
Toasts
Slider
Text Boxes
Text Editor
Tool Tip
Icons
Theme Color Shade
Color Shade
Text Color
Background Color
Border Color
Gradient
Text Gradient
Single Color
Double Color
Triple Color
Background Gradient
Single Color
Double Color
Triple Color
Border Gradient
Single Color
Double Color
Triple Color
Other Pages
Landing Pages
Top Nav 1
Top Nav 2
Side Nav 1
Login 1
Forget Password
Apps
Add Data
Nav First Level
Nav Second Level
Nav Third Level
N
A
V

Efficient & Compact Toaster

Perfect Toast Every Time

Our premium toaster is designed to make your mornings brighter and easier. Whether you prefer a light golden crisp or a deep, rich brown, this toaster delivers consistent results with ease. Its compact design and advanced features make it a perfect addition to any kitchen.

Key Features:

  • Adjustable Browning Control: Achieve your preferred level of toastiness with precise settings to suit every taste.
  • Wide Slots: Toast everything from thin bread slices to thick bagels or artisan loaves effortlessly.
  • Compact & Stylish Design: Modern aesthetics that save counter space while complementing your kitchen décor.
  • Easy to Clean: A removable crumb tray and smooth surfaces make cleaning a breeze.
  • Energy Efficient: Delivers high performance with minimal energy consumption, saving time and electricity.
  • Safety Features: Cool-touch exterior and auto shut-off for safe operation.

Static Toasts

A static toast is a fixed notification that remains visible on the screen without animation. It is commonly used for persistent messages that require user interaction or acknowledgment.

Title
x
Hello, world! This is a toast message from Celebrate Tech
Don't Show Again
Title
x
Hello, world! This is a toast message from Celebrate Tech
Don't Show Again
Title
x
Hello, world! This is a toast message from Celebrate Tech
Don't Show Again
Title
x
Hello, world! This is a toast message from Celebrate Tech
Don't Show Again
Source Code 

<div id="StaticToastBL" class="ToastCT">

    <div class="ToastHeadingContainer DyFx FxJyCtSeBn CrBdRd PgLt10 PgRt10 PgTp5 PgBm5 BrTpLtRs10 BrTpRtRs10">

        <div class="ToastHeader FtSe20 FtWt600">Title</div>
        <span class="ToastCloseBtn FtWt600 CrurPr FtSe20">x</span>

    </div>

    <div class="ToastBodyContainer CrBdBe PgLt10 PgRt10 PgTp20 PgBm20">

        <div class="ToastBody">Hello, world! This is a toast message from Celebrate Tech</div>
    </div>

    <div class="DyFx FxJyCtSeBn FxAnIsCr CrBdBe PgLt10 PgRt10 PgTp5 PgBm5 BrBmLtRs10 BrBmRtRs10">
        <button class="toastBtnSuccess Pg10 PgLt30 PgRt30 Br0 BrRs20 CrBdGn40Lt91 CrWe FtSe16 FtWt600">Yes</button>
        <button class="toastBtnFailed Pg10 PgLt30 PgRt30 Br0 BrRs20 CrBdRd40Lt91 CrWe FtSe16 FtWt600">No</button>
        <div class="DyFx FxAnIsCr"><input type="checkbox" class="toastCheckbox Pg10 Ht20 Wh20" />Don't Show Again</div>
    </div>
</div>

<div id="StaticToastBR" class="ToastCT">

    <div class="ToastHeadingContainer DyFx FxJyCtSeBn CrBdRd PgLt10 PgRt10 PgTp5 PgBm5 BrTpLtRs10 BrTpRtRs10">

        <div class="ToastHeader FtSe20 FtWt600">Title</div>
        <span class="ToastCloseBtn FtWt600 CrurPr FtSe20">x</span>

    </div>

    <div class="ToastBodyContainer CrBdBe PgLt10 PgRt10 PgTp20 PgBm20">

        <div class="ToastBody">Hello, world! This is a toast message from Celebrate Tech</div>
    </div>

    <div class="DyFx FxJyCtSeBn FxAnIsCr CrBdBe PgLt10 PgRt10 PgTp5 PgBm5 BrBmLtRs10 BrBmRtRs10">
        <button class="toastBtnSuccess Pg10 PgLt30 PgRt30 Br0 BrRs20 CrBdGn40Lt91 CrWe FtSe16 FtWt600">Yes</button>
        <button class="toastBtnFailed Pg10 PgLt30 PgRt30 Br0 BrRs20 CrBdRd40Lt91 CrWe FtSe16 FtWt600">No</button>
        <div class="DyFx FxAnIsCr"><input type="checkbox" class="toastCheckbox Pg10 Ht20 Wh20" />Don't Show Again</div>
    </div>
</div>

<div id="StaticToastTL" class="ToastCT">

    <div class="ToastHeadingContainer DyFx FxJyCtSeBn CrBdRd PgLt10 PgRt10 PgTp5 PgBm5 BrTpLtRs10 BrTpRtRs10">

        <div class="ToastHeader FtSe20 FtWt600">Title</div>
        <span class="ToastCloseBtn FtWt600 CrurPr FtSe20">x</span>

    </div>

    <div class="ToastBodyContainer CrBdBe PgLt10 PgRt10 PgTp20 PgBm20">

        <div class="ToastBody">Hello, world! This is a toast message from Celebrate Tech</div>
    </div>

    <div class="DyFx FxJyCtSeBn FxAnIsCr CrBdBe PgLt10 PgRt10 PgTp5 PgBm5 BrBmLtRs10 BrBmRtRs10">
        <button class="toastBtnSuccess Pg10 PgLt30 PgRt30 Br0 BrRs20 CrBdGn40Lt91 CrWe FtSe16 FtWt600">Yes</button>
        <button class="toastBtnFailed Pg10 PgLt30 PgRt30 Br0 BrRs20 CrBdRd40Lt91 CrWe FtSe16 FtWt600">No</button>
        <div class="DyFx FxAnIsCr"><input type="checkbox" class="toastCheckbox Pg10 Ht20 Wh20" />Don't Show Again</div>
    </div>
</div>

<div id="StaticToastTR" class="ToastCT">

    <div class="ToastHeadingContainer DyFx FxJyCtSeBn CrBdRd PgLt10 PgRt10 PgTp5 PgBm5 BrTpLtRs10 BrTpRtRs10">

        <div class="ToastHeader FtSe20 FtWt600">Title</div>
        <span class="ToastCloseBtn FtWt600 CrurPr FtSe20">x</span>

    </div>

    // body div
    <div class="ToastBodyContainer CrBdBe PgLt10 PgRt10 PgTp20 PgBm20">

        <div class="ToastBody">Hello, world! This is a toast message from Celebrate Tech</div>
    </div>

    // footer div
    <div class="DyFx FxJyCtSeBn FxAnIsCr CrBdBe PgLt10 PgRt10 PgTp5 PgBm5 BrBmLtRs10 BrBmRtRs10">
        <button class="toastBtnSuccess Pg10 PgLt30 PgRt30 Br0 BrRs20 CrBdGn40Lt91 CrWe FtSe16 FtWt600">Yes</button>
        <button class="toastBtnFailed Pg10 PgLt30 PgRt30 Br0 BrRs20 CrBdRd40Lt91 CrWe FtSe16 FtWt600">No</button>
        <div class="DyFx FxAnIsCr"><input type="checkbox" class="toastCheckbox Pg10 Ht20 Wh20" />Don't Show Again</div>
    </div>
</div>

// Buttons
<div class="DyFx Pg10 Mn10 FxJyCtSeAd">
    <button id="staticToastBtnBL" class="Bn CrBrBe CrBdBe CrWe Mn10">
        Bottom Left
    </button>
    <button id="staticToastBtnBR" class="Bn CrBrOe CrBdOe CrWe Mn10">
        Bottom Right
    </button>
    <button id="staticToastBtnTL" class="Bn CrBrPe CrBdPe CrWe Mn10">
        Top Left
    </button>
    <button id="staticToastBtnTR" class="Bn CrBrBk CrBdBk CrWe Mn10">
        Top Right
    </button>
</div>


document.addEventListener('DOMContentLoaded', () => {

    // static toasts without animation
    const objBottomLeft = {
        id: 'StaticToastBL',
        closeBtn: true,
        autoClose: 3000, // 0 means no auto close
        dontShowAgain: false, // true if need don't show again button
        placement: {
            bottom: 5,
            left: 5,
        },
        textColor: "CrWe", // white
        width: 40, // view-width
        onSuccess: () => {
            console.log('on success');
        },

        onFail: () => {
            console.log('on fail')
        }
    }

    const objBottomRight = {
        id: 'StaticToastBR',
        closeBtn: true,
        autoClose: 3000, // 0 means no auto close
        dontShowAgain: false, // true if need don't show again button
        placement: {
            bottom: 5,
            right: 5,
        },
        textColor: "CrWe", // white
        width: 40, // view-width

        onSuccess: () => {
            console.log('on success');
        },

        onFail: () => {
            console.log('on fail')
        }
    }

    const objTopLeft = {
        id: 'StaticToastTL',
        closeBtn: true,
        autoClose: 3000, // 0 means no auto close
        dontShowAgain: false, // true if need don't show again button
        placement: {
            top: 5,
            left: 5,
        },
        textColor: "CrWe", // white
        width: 40, // view-width

        onSuccess: () => {
            console.log('on success');
        },

        onFail: () => {
            console.log('on fail')
        }
    }

    const objTopRight = {
        id: 'StaticToastTR',
        closeBtn: true,
        autoClose: 3000, // 0 means no auto close
        dontShowAgain: false, // true if need don't show again button
        placement: {
            top: 5,
            right: 5,
        },
        textColor: "CrWe", // white
        width: 40, // view-width

        onSuccess: () => {
            console.log('on success');
        },

        onFail: () => {
            console.log('on fail')
        }
    }

    // execution
    const staticBtnIds = ["staticToastBtnBL",
        "staticToastBtnBR",
        "staticToastBtnTL",
        "staticToastBtnTR",];

    staticBtnIds.forEach((id, idx) => {
        switch (idx) {
            case 0:
                document.getElementById(id)?.addEventListener('click', () => CT.CeTt(objBottomLeft));
                break;
            case 1:
                document.getElementById(id)?.addEventListener('click', () => CT.CeTt(objBottomRight));
                break;
            case 2:
                document.getElementById(id)?.addEventListener('click', () => CT.CeTt(objTopLeft));
                break;
            case 3:
                document.getElementById(id)?.addEventListener('click', () => CT.CeTt(objTopRight));
                break;
            default:
                break;
    }
})

Animated Toasts

Toasts with animation enhance notifications by smoothly appearing, moving, or disappearing with visual effects like fading, sliding, or bouncing. These animations improve user experience by making transitions more engaging and visually clear.

Title
x
Hello, world! This is a toast message from Celebrate Tech
Don't Show Again
Title
x
Hello, world! This is a toast message from Celebrate Tech
Don't Show Again
Title
x
Hello, world! This is a toast message from Celebrate Tech
Don't Show Again
Title
x
Hello, world! This is a toast message from Celebrate Tech
Don't Show Again
Source Code 

<div id="StaticAnimatedToastBL" class="ToastCT">

    <div class="ToastHeadingContainer DyFx FxJyCtSeBn CrBdRd PgLt10 PgRt10 PgTp5 PgBm5 BrTpLtRs10 BrTpRtRs10">

        <div class="ToastHeader FtSe20 FtWt600">Title</div>
        <span class="ToastCloseBtn FtWt600 CrurPr FtSe20">x</span>

    </div>

    <div class="ToastBodyContainer CrBdBe PgLt10 PgRt10 PgTp20 PgBm20">

        <div class="ToastBody">Hello, world! This is a toast message from Celebrate Tech</div>
    </div>

    <div class="DyFx FxJyCtSeBn FxAnIsCr CrBdBe PgLt10 PgRt10 PgTp5 PgBm5 BrBmLtRs10 BrBmRtRs10">
        <button class="toastBtnSuccess Pg10 PgLt30 PgRt30 Br0 BrRs20 CrBdGn40Lt91 CrWe FtSe16 FtWt600">Yes</button>
        <button class="toastBtnFailed Pg10 PgLt30 PgRt30 Br0 BrRs20 CrBdRd40Lt91 CrWe FtSe16 FtWt600">No</button>
        <div class="DyFx FxAnIsCr"><input type="checkbox" class="toastCheckbox Pg10 Ht20 Wh20" />Don't Show Again</div>
    </div>
</div>

<div id="StaticAnimatedToastBR" class="ToastCT">

    <div class="ToastHeadingContainer DyFx FxJyCtSeBn CrBdRd PgLt10 PgRt10 PgTp5 PgBm5 BrTpLtRs10 BrTpRtRs10">

        <div class="ToastHeader FtSe20 FtWt600">Title</div>
        <span class="ToastCloseBtn FtWt600 CrurPr FtSe20">x</span>

    </div>

    <div class="ToastBodyContainer CrBdBe PgLt10 PgRt10 PgTp20 PgBm20">

        <div class="ToastBody">Hello, world! This is a toast message from Celebrate Tech</div>
    </div>

    <div class="DyFx FxJyCtSeBn FxAnIsCr CrBdBe PgLt10 PgRt10 PgTp5 PgBm5 BrBmLtRs10 BrBmRtRs10">
        <button class="toastBtnSuccess Pg10 PgLt30 PgRt30 Br0 BrRs20 CrBdGn40Lt91 CrWe FtSe16 FtWt600">Yes</button>
        <button class="toastBtnFailed Pg10 PgLt30 PgRt30 Br0 BrRs20 CrBdRd40Lt91 CrWe FtSe16 FtWt600">No</button>
        <div class="DyFx FxAnIsCr"><input type="checkbox" class="toastCheckbox Pg10 Ht20 Wh20" />Don't Show Again</div>
    </div>
</div>

<div id="StaticAnimatedToastTL" class="ToastCT">

    <div class="ToastHeadingContainer DyFx FxJyCtSeBn CrBdRd PgLt10 PgRt10 PgTp5 PgBm5 BrTpLtRs10 BrTpRtRs10">

        <div class="ToastHeader FtSe20 FtWt600">Title</div>
        <span class="ToastCloseBtn FtWt600 CrurPr FtSe20">x</span>

    </div>

    <div class="ToastBodyContainer CrBdBe PgLt10 PgRt10 PgTp20 PgBm20">

        <div class="ToastBody">Hello, world! This is a toast message from Celebrate Tech</div>
    </div>

    <div class="DyFx FxJyCtSeBn FxAnIsCr CrBdBe PgLt10 PgRt10 PgTp5 PgBm5 BrBmLtRs10 BrBmRtRs10">
        <button class="toastBtnSuccess Pg10 PgLt30 PgRt30 Br0 BrRs20 CrBdGn40Lt91 CrWe FtSe16 FtWt600">Yes</button>
        <button class="toastBtnFailed Pg10 PgLt30 PgRt30 Br0 BrRs20 CrBdRd40Lt91 CrWe FtSe16 FtWt600">No</button>
        <div class="DyFx FxAnIsCr"><input type="checkbox" class="toastCheckbox Pg10 Ht20 Wh20" />Don't Show Again</div>
    </div>
</div>

<div id="StaticAnimatedToastTR" class="ToastCT">

    <div class="ToastHeadingContainer DyFx FxJyCtSeBn CrBdRd PgLt10 PgRt10 PgTp5 PgBm5 BrTpLtRs10 BrTpRtRs10">

        <div class="ToastHeader FtSe20 FtWt600">Title</div>
        <span class="ToastCloseBtn FtWt600 CrurPr FtSe20">x</span>

    </div>

    <div class="ToastBodyContainer CrBdBe PgLt10 PgRt10 PgTp20 PgBm20">

        <div class="ToastBody">Hello, world! This is a toast message from Celebrate Tech</div>
    </div>

    <div class="DyFx FxJyCtSeBn FxAnIsCr CrBdBe PgLt10 PgRt10 PgTp5 PgBm5 BrBmLtRs10 BrBmRtRs10">
        <button class="toastBtnSuccess Pg10 PgLt30 PgRt30 Br0 BrRs20 CrBdGn40Lt91 CrWe FtSe16 FtWt600">Yes</button>
        <button class="toastBtnFailed Pg10 PgLt30 PgRt30 Br0 BrRs20 CrBdRd40Lt91 CrWe FtSe16 FtWt600">No</button>
        <div class="DyFx FxAnIsCr"><input type="checkbox" class="toastCheckbox Pg10 Ht20 Wh20" />Don't Show Again</div>
    </div>
</div>

<div class="DyFx Pg10 Mn10 FxJyCtSeBn">
    <button id="staticAnimatedToastBtnBL" class="Bn CrBrBe CrBdBe CrWe Mn10">
        Bottom Left
    </button>
    <button id="staticAnimatedToastBtnBR" class="Bn CrBrOe CrBdOe CrWe Mn10">
        Bottom Right
    </button>
    <button id="staticAnimatedToastBtnTL" class="Bn CrBrPe CrBdPe CrWe Mn10">
        Top Left
    </button>
    <button id="staticAnimatedToastBtnTR" class="Bn CrBrBk CrBdBk CrWe Mn10">
        Top Right
    </button>
</div>


document.addEventListener('DOMContentLoaded', () => {
    // animated toasts
    const objAnimatedBottomLeft = {
        id: 'StaticAnimatedToastBL',
        closeBtn: true,
        autoClose: 3000, // 0 means no auto close
        dontShowAgain: false, // true if need don't show again button
        animation: 'AnSe',
        placement: {
            bottom: 5,
            left: 5,
        },
        textColor: "CrWe", // white
        width: 40, // view-width

        onSuccess: () => {
            console.log('on success');
        },

        onFail: () => {
            console.log('on fail')
        }
    }

    const objAnimatedBottomRight = {
        id: 'StaticAnimatedToastBR',
        closeBtn: true,
        autoClose: 3000, // 0 means no auto close
        dontShowAgain: false, // true if need don't show again button
        animation: 'AnSeRe',
        placement: {
            bottom: 5,
            right: 5,
        },
        textColor: "CrWe", // white
        width: 40, // view-width

        onSuccess: () => {
            console.log('on success');
        },

        onFail: () => {
            console.log('on fail')
        }
    }

    const objAnimatedTopLeft = {
        id: 'StaticAnimatedToastTL',
        closeBtn: true,
        autoClose: 3000, // 0 means no auto close
        dontShowAgain: false, // true if need don't show again button
        animation: 'AnWeBm',
        placement: {
            top: 5,
            left: 5,
        },
        textColor: "CrWe", // white
        width: 40, // view-width

        onSuccess: () => {
            console.log('on success');
        },

        onFail: () => {
            console.log('on fail')
        }
    }

    const objAnimatedTopRight = {
        id: 'StaticAnimatedToastTR',
        closeBtn: true,
        autoClose: 3000, // 0 means no auto close
        dontShowAgain: false, // true if need don't show again button
        animation: 'AnWeTp',
        placement: {
            top: 5,
            right: 5,
        },
        textColor: "CrWe", // white
        width: 40, // view-width

        onSuccess: () => {
            console.log('on success');
        },

        onFail: () => {
            console.log('on fail')
        }
    }

    // execution
    const staticAnimatedBtnIds = ["staticAnimatedToastBtnBL",
        "staticAnimatedToastBtnBR",
        "staticAnimatedToastBtnTL",
        "staticAnimatedToastBtnTR",];

    staticAnimatedBtnIds.forEach((id, idx) => {
        switch (idx) {
            case 0:
                document.getElementById(id)?.addEventListener('click', () => CT.CeTt(objAnimatedBottomLeft));
                break;
            case 1:
                document.getElementById(id)?.addEventListener('click', () => CT.CeTt(objAnimatedBottomRight));
                break;
            case 2:
                document.getElementById(id)?.addEventListener('click', () => CT.CeTt(objAnimatedTopLeft));
                break;
            case 3:
                document.getElementById(id)?.addEventListener('click', () => CT.CeTt(objAnimatedTopRight));
                break;
            default:
                break;
        }
    })
})

Stacking Toasts

Stacking toasts refers to the arrangement of multiple toast notifications in a vertical stack, typically positioned in a corner of the screen. Each new toast appears at the top or bottom of the stack, pushing existing toasts upward or downward.

Source Code 

<button id="stackingToastBtn" class="Bn CrBrPk CrBdPk CrWe">
    Stacking Toast
</button>


document.addEventListener('DOMContentLoaded', () => {
    // stacking Toasts
    const objStacking = {
        id: 'StackingToast',
        closeBtn: true,
        autoClose: 3000, // 0 means no auto close
        dontShowAgain: false, // true if need don't show again button
        maxStack: 3,
        toastHeight: 0,
        placement: {
            bottom: 0,
            left: 5,
        },
        textColor: "CrWe", // white
        width: 40, // view-width

        onSuccess: () => {
            console.log('on success');
        },

        onFail: () => {
            console.log('on fail')
        },

        customHTML: `
        <div class="StackingToast ToastCT">
            <div class="ToastHeadingContainer DyFx FxJyCtSeBn CrBdRd PgLt10 PgRt10 PgTp5 PgBm5 BrTpLtRs10 BrTpRtRs10">

            <div class="ToastHeader FtSe20 FtWt600">Title</div>
            <span class="ToastCloseBtn FtWt600 CrurPr FtSe20">x</span>

                    </div>
            <div class="ToastBodyContainer CrBdBe PgLt10 PgRt10 PgTp20 PgBm20">
            <div class="ToastBody">Hello, world! This is a toast message from Celebrate Tech</div>
                    </div>

            <div class="DyFx FxJyCtSeBn FxAnIsCr CrBdBe PgLt10 PgRt10 PgTp5 PgBm5 BrBmLtRs10 BrBmRtRs10">
            <button class="toastBtnSuccess Pg10 PgLt30 PgRt30 Br0 BrRs20 CrBdGn40Lt91 CrWe FtSe16 FtWt600">Yes</button>
            <button class="toastBtnFailed Pg10 PgLt30 PgRt30 Br0 BrRs20 CrBdRd40Lt91 CrWe FtSe16 FtWt600">No</button>
                    </div>
            </div>
        `,
    }

    document.getElementById('stackingToastBtn')?.addEventListener('click', () => {
        CT.CeSgTt(objStacking);
    })
})

Toast Positioning

If you want to change toast positions you can play with our css classes. PnTp[number from 0 to 100] is for position top. PnBm[number from 0 to 100] is for position bottom. PnLt[number from 0 to 100] is for position left. PnRt[number from 0 to 100] is for position right.

Initialize Toast Manually
Source Code 

// In some cases you may want to use the Toast and call init function manually.
document.addEventListener('DOMContentLoaded', function () {
    CT.ItTt(); // init Toast
});
Web Tool
Celebrate Tech © 2008 - 2024
Welcome Amit
  Logout
  Change Password
  Change Email

Loading...