DEV Community

Bear Evans
Bear Evans

Posted on • Originally published at

Create Horrible Console Messages with CSS

Are you tired of reading debug messages featuring the same Courier New 10px font over and over again? Do you want to color code your error messages or console logs by code block? Do you want to remind people inspecting your web app of the lawless days of Myspace?

Well now you can.

Most modern browsers support styling console messages with CSS. All you have to do is prefix your message with %c and pass whatever styling you want as a second argument.

console.log("This is a normal message.");
  "%cThis message is big and scary!",
  "color: red; background-color: black; font-size: 16px"
console.log("This message is not.");
Enter fullscreen mode Exit fullscreen mode

For example, the above code results in the following output.

Big Scary Console Message

You can even define styling in variables and use template literals.

const style = `
    background: linear-gradient(312deg, rgba(255,0,0,1) 0%, rgba(241,255,0,1) 15%, rgba(0,255,12,1) 30%, rgba(0,254,255,1) 43%, rgba(0,1,255,1) 59%, rgba(250,0,253,1) 88%, rgba(255,0,0,1) 100%);
    border: 1px solid white;
    padding: 5px;
    font-family: "Comic Sans MS";
    font-size: 16px;

  `%cπŸŒˆπŸ’– An error has occurred. Everything is ruined forever. πŸ’–πŸŒˆ`,
Enter fullscreen mode Exit fullscreen mode

Rainbow Colored Error Message

It really helps soften the blow, don’t you think?

Top comments (4)

amittraspal profile image

Yeah, it sure softens the blow.

Maybe not the rainbow gradient, but it's a good thing to know. 🀣

nightdvlpr_50 profile image
Amir • Edited

I've published a tiny package about this topic.

rajeshroyal profile image
Rajesh Royal


timbauwens profile image

Love it!!