Buy Plus UI v2.6! Demo Buy Now!

How to Create Color Boxes with Simple CSS

Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated

Hello Blogger's how are you. I hope you are doing well. Have you ever wondered to add some quotes in beautiful boxes for writing.

Yes you heard it right. So today we are going to learn How to Create Color Boxes with Simple CSS for your blog.

How to Create Color Boxes with Simple CSS

With this color boxes you can give beautiful notification to your website visitors.

Now let's start the adding process.

Adding Color Boxes with CSS

Adding CSS

  1. Go to your Blogger dashboard.
  2. Then click on theme section and then Edit HTML.
  3. Now search for the </style> tag.
  4. Copy the below given CSS and paste it just above the </style> tag.

/* notification colorbox */
.ta-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
} {
background: #03a9f4
} {
background: #4CAF50
} {
background: #F44336
} {
background: #ff9800
.ta-colorbox.purple {
background: #673ab7
} {
background: #1e272e

Now don't forget to save the theme

Using HTML codes for Creating color boxes.

You can use the below given HTML codes for creating the color boxes where you want to use it.

Hello this is example of black box

<p class="ta-colorbox black">Hello this is black box</p>

Hello this is example of green box

<p class="ta-colorbox green">Hello this is green box</p>

Hello this is example of orange box

<p class="ta-colorbox orange">Hello this is orange box</p>

Hello this is example of purple box

<p class="ta-colorbox purple">Hello this is purple box</p>

Hello this is example of blue box

<p class="ta-colorbox blue">Hello this is blue box</p>

Hello this is example of red box

<p class="ta-colorbox red">Hello this is red box</p>

Now after following the above steps I hope you have successfully added the color boxes code in your blog. If you got any error kindly contact us.


So today we have learnt about How to Add Color Boxes with Simple CSS. I hope you like this post and please do like and follow this blog for more this types of post. If you have any query kindly comment below.

Getting Info...

About the Author

Hello Friends. Welcome to my website. I hope you all are doing good. If you like our work. Please revisit again. And do like and follow our blogs.

Buy me a Coffee

Post a Comment

Please do not spam in the comment section or your comment will not be approved.
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.