How to style console log messages

We recently added a little easter egg to Basedash which shows ASCII art of our logo, and a short message with links in the browser console.

I’ve seen a few other products do something similar, including Linear and Facebook:

One thing you might notice is that both of these examples apply styling to the console messages. Linear uses a monospace font (which is necessary for ASCII art to display properly), and Facebook changes the text size and color.

Here’s how you can do the same:

Applying styling to console.log messages

First, start with a standard console.log statement:

console.log('Basedash is rad');

Then, add %c to the start of your string:

console.log('%cBasedash is rad');

Finally, add a second parameter with some CSS:

console.log('%cBasedash is rad', 'color: red; font-size: 20px;');

The CSS from the second parameter is applied to everything after the %c. Most CSS properties that affect text work—you can see the full list on MDN.

You can also add multiple %c tags to apply different styles to different parts of your message. Each %c tag adds its own parameter to the console.log function call, like so:

console.log('%cBasedash is %crad', 'color: red', 'color: green');

‍
Rad!

Some other ideas to try:

• Embed an image with background-image
• Change the font-family to match the rest of your website
• Add a 3D effect with box-shadow
• Italicize text with font-style

‍

Check out the full MDN docs on styling console output here.

‍

If you want to see the full Basedash console welcome message in action, sign up here and open your developer console.