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:

Want to save money while shopping online? Try Honey. Honey's a browser extension that automatically searches for and tries coupon while you're checking out. Check it out!

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.

Leave a Reply

Your email address will not be published. Required fields are marked *

Keep Up With Harner Designs!

Get updates about New Projects, Products, Discounts, and Giveaways from Harner Designs!

By submitting your email, you agree to our Privacy Policy and give us consent to send you marketing and promotional emails. You can unsubscribe at any time.