Iain Freestone

πŸŽ€ Use CSS to make your console messages prettier

May 26, 2020

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

Console Log