loading...
Cover image for 🎀 Use CSS to make your console messages prettier

🎀 Use CSS to make your console messages prettier

iainfreestone profile image Iain Freestone Updated on ・1 min read

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);"
)

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.

Discussion

markdown guide