Create multicolored message frames with CSS

TrickPk 9/19/21  Recently , Updated

Also Read

If you're a web developer or simply an internet content creator, notifications are probably a regular thing. Today, TrickPk will share with you the code of multicolor message frames with simple CSS.

Create multicolored message frames with simple CSS

With a few steps below you will make your own notifications more prominent and eye-catching. If you haven't tried it yet, what are you waiting for?

Create a notification frame Box in Blog Articles

---

View Demo

Step 1: Create CSS for the notification frame.

.trickpk-colorbox {
    overflow: hidden;
    position: relative;
    margin: .5rem 0 1rem;
    transition: box-shadow.25 s;
    border-radius: 10px;
    color: #fff;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    padding: 20px;
    font-size: 16px
}

.trickpk-colorbox.blue {
    background: #03a9f4
}

.trickpk-colorbox.green {
    background: #4CAF50
}

.trickpk-colorbox.red {
    background: #F44336
}

.trickpk-colorbox.orange {
    background: #ff9800
}

.trickpk-colorbox.purple {
    background: #673ab7
}

You can also change any background color, as you want.

Step 2: Usage → call to the class corresponding to each color, for example:

<p class="trickpk-colorbox blue">TrickPk - Share knowledge, creative thinking!</p>



<p class="trickpk-colorbox green">TrickPk - Share knowledge, creative thinking!</p>



<p class="trickpk-colorbox red">TrickPk - Share knowledge, creative thinking!</p>



<p class="trickpk-colorbox orange">TrickPk - Share knowledge, creative thinking!</p>



<p class="trickpk-colorbox purple">TrickPk - Share knowledge, creative thinking!</p>

Finally Outcomes:

Above is the entire code and instructions for creating a multicolored message frame with simple CSS. If you have any questions or complaints about copyright, please comment below to let me know. Wishing you a very productive day of study and work. Good bye and see you again!

Copyright © TrickPk