DEV Community

Cover image for 🎀 Use CSS to make your console messages prettier
Iain Freestone
Iain Freestone

Posted on • Edited on • Originally published at iainfreestone.com

🎀 Use CSS to make your console messages prettier

If you want to make your console.log() messages really stand out from the crowd you can style them with CSS.

Just add %c before the text you wish to style, anything before this will not be styled, and pass in your CSS as a string to the second argument of console.log('string','cssString')

console.log(
   "%c CSS Styled console.log()",
   "border-radius:30px; padding: 10px; background: content-box radial-gradient(white,orange);"
)
Enter fullscreen mode Exit fullscreen mode

Outputs

Alt Text

CSS Styled Console.log()

If you enjoyed this little snippet you can follow me on Twitter where I regularly post bite size tips relating to HTML, CSS and JavaScript.

Top comments (0)