Styling console.log Output: Colors, ASCII Art, Images, SVG and HTML in the Browser Console

Do you often open the browser console to inspect web pages? When you open the console on sites like Juejin, you can see console.log outputs, and sometimes even leftover debugging information in production.

The console.log function supports basic CSS styling, but its capabilities go far beyond simple colors. Below we explore several creative ways to use it.

Beginner: Adding Color to console.log

You can add basic CSS to console.log using the %c directive. For example:

console.log('%cWant to join Juejin? Submit your resume: https://job.toutiao.com/s/idq6X5rb', 'color:#1e80ff;');

The %c token applies the CSS style that follows it to the subsequent text, while the text before the token remains unchanged.

You can chain multiple %c tokens to apply different styles:

console.log(
  "Multiple styles: %cred %corange",
  "color: red",
  "color: orange",
  "Additional unformatted message"
);

The result looks like the screenshot below (see image). The MDN documentation lists all supported CSS properties.

Intermediate: ASCII Art

Some developers use console.log to display ASCII art, as seen in a B‑station video. ASCII art is a form of graphic created from plain text characters, originating from Carnegie Mellon University in 1982.

ASCII Art, also known as “text art” or “character art,” uses ASCII characters to form images. Emojis are a common example of ASCII art.

Intermediate: Inserting Images

Since CSS supports background , you can embed an image by converting it to a Base64 data URL and using it as a background in a styled console log:

console.log('%c ', 'padding-left: 50px; line-height: 50px; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASAAAAEgCAMAAAAjXV6yAAAANlBMVEVHcEwzMjQvJjgxJDcvJDgwJThRNTmfxWgy2SbD9nmh8GaOP121TVnCPS/qRCvtXj3ym2j2tXmABwdyAAAABXRSTlMABTvE+i919boAAAMySURBVHgB7dzLTsNmFIXR+BqKYwLv/7KlUsWkZ9P+lS3H1vrIFEssHXmyFW6vVdcP47RB49B3tysECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAATqeog7Qz6mEhrmtiwJ1/RC6h95C1wUaq6b5/kfZewKarws0VQH6HWgG5IJyLsgFuSAX5IJckAtyQYBckAtyQS7IBbkgF+SCAAHq6rYDGqsC0AX2r6UVaAj13cn3r7fQew10n+uG4N91Z9+/WoHyuyZ07pfxhkCtEoAAAQIECBAgQIAAAQIECBAgQIAAAQIE6LL71/5AdWfZvxLQdK997qEANA19qDvJ/jUGn3l5lC1zaKob83B4iv1rbAeaprn4+aWx6hWBplAz0AYBAgQIECBAgAABAgQIECBAVwACBAgQIECAAHV1LwhUd5r/f7j8pfGPzzdQmDXmto7ay/L3v9bQsnNr6KC9LH//a/2oe4RaIR6hj7r1oK9q5q395YCmqkOBAAECBAgQIEAhQA0+gAAt1wRyQYAAAQIECBAgQIC6sisA1e29fy0J6Pl4Pn4+WWhzoOa9bOf9K/p8hh7fv/HfP+2172U7718R6Kvs8/lxQFvtZfllfAGgqepCQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECNAzFIFCVwWK+9dX6DP0vCzQ1yYB+g4QIECAAAECBAgQIECAAAECBAgQIECAAAECZPZZTz8cbkbxqFtMz4AA/b8AAQIECBAgQIAAAQIECBAgQIAAAQIECBCgEKC/+5f9C1AOECBAgAABAgQIECBAgAABAgQIECBAgAABAgQI0AooXEroykCAAAECBAgQIECAAAECBAgQIECAAAECBAgQoLLzA41VCSjXD6FlLWt2W0Ot+1eUCA2hVqCuDw1zXetfNofWrS6lbujruuyTjYqa300ZaMrP2fddE7pt0hWAbjsFCBAgQIAAAQIECBAgQNsHCBAgQIAAAQIEqKwdKD/n+P0rt/Velmt9ztLYENobqG0vyw1tz8ntvn/tuZfl4j6Vn5Nr3L8OqRkonPqGQFtKAAIECBAgQIAAAQIECBAgQIAAAQIECBCg4wME6E+7tQcAK80eGwAAAABJRU5ErkJggg==) 100% / contain no-repeat;');

The image is displayed directly in the console as shown in the following screenshot.

Intermediate: Inserting SVG and HTML

Following the same idea, you can embed an SVG image using a data URL:

console.log('%c ', `
line-height:100px;
padding-left:400px;
background-repeat:no-repeat;
background-image:url("data:image/svg+xml,
")
`);

This produces a simple animated line (see GIF).

HTML cannot be rendered directly inside console.log , but you can embed HTML inside an SVG using the foreignObject element:

console.log('%c ', `
line-height:100px;
padding-left:100px;
background-repeat:no-repeat;
background-image:url("data:image/svg+xml,
")
`);

The animation is displayed in the console as shown in the GIF below.

Important notes:

The %c token must be followed by at least one character (a space works).

CSS in console.log does not support width and height ; use padding and line-height to control size.

When using SVG or HTML inside the data URL, remember to include the xmlns namespace attribute, otherwise rendering may fail.

Wrap Up

Thanks for reading; go ahead and hide a colorful Easter egg in your own website’s console!