Sick Console Bro! How To Style Your console.log with CSS

Photo by Glenn Carstens-Peters on Unsplash

In Chrome and Firefox (>31) you can add CSS styles to your console.log() messages. It's fairly simple and straightforward.

All you need to do is include a %c string before your log message and then pass your CSS as a parameter to the console.log( ) function. Like so:

console.log("%c{{Log Message}}", "{{CSS}}");

For example, this code runs on my portfolio:

console.log("%cHarner Designs", "color:#233E82; font-family:'Ubuntu'; display: block;font-weight:bold; font-size:48px; background:#fff;");
    console.log("%cLike to dig into the meaty bits of the website?\nThanks for looking! Hit us up on Twitter @harnerdesigns!", "color:#222; font-family:'Ubuntu'; font-weight:100; font-size:24px; background:#fff;");
    console.log("%cDid you know you can style your console output?!", "color:#333; font-family:'Ubuntu'; font-weight:100; font-size:18px; background:#fff;");
    console.log("%cCheck our blog to learn how: https://harnerdesigns.com/blog/style-your-console-log-with-css/", "line-height: 3em; padding: 0.5em; text-align: center; border: 1px dotted #aaa; background:#fff; font-size: 14px;");

and outputs like this to the console:

Styling Multiple Strings In One Log

It's also possible to include multiple strings in one command and style them differently. Check it out:

console.log("%cString1" + "%cString2", "{{CSS for String1}}", "{{CSS for String2}}");

Reusing Styles Across Log Messages

You can also store the CSS You want to apply to a variable and then pass that to multiple console.logs:

var consoleStyle = "{{Reusable CSS}}";
console.log("%cString1", consoleStyle);
console.log("%cString2", consoleStyle);

Conclusion

Do you leave any little easter eggs in your console? Could you see a use case for this in your own projects? I'd love to know down in the comments! Show me some examples of cool things you've found in console messages.