Styling The Console With Percent C

A %c token in a console.log makes the console read the next argument as CSS and style the text.

In 2026: Still works in every DevTools console. The %c format directive consumes the following argument as a CSS declaration string and applies it to the log text that follows. Only typography and box properties take effect (color, background, font, padding); layout and positioning are ignored. It is how tools print oversized coloured banners in the console.

Where it came from: MDN Console API, styling console output. The %c directive came from the Firebug console around 2010 and was standardised into the WHATWG console standard. MDN ↗

<script>
// Open the browser DevTools console (F12) to see the styled line.
console.log(
  "%cxbawx.com",
  "color:#fff;background:#c0f;font-size:40px;padding:6px 14px;border-radius:6px;font-family:monospace"
);
document.write("<p>Open your DevTools console (F12). This page logged a 40px pink banner:</p>");
document.write("<pre>console.log(\"%cxbawx.com\", \"color:#fff;background:#c0f;font-size:40px\")</pre>");
document.write("<p>The <code>%c</code> token reads the NEXT argument as a CSS string and paints everything after it. Two <code>%c</code> tokens style two runs.</p>");
</script>