DEV Community

ann lin
ann lin

Posted on

Console.log with CSS Style

I remember when I was young and naive, I accidentally right clicked on Facebook browser and saw this HUGE ASS WARNING. I thought it was cute. Guess who has the same warning. (Something that ends with plus)

Facebook's warning log

Spoiler alert, it's still there.

Most modern browsers support styling for console.log(), except for Safari. (Whut) Add %c before the text in the first parameter and CSS style in the next parameter.

        "color:red;font-family:system-ui;font-size:4rem;-webkit-text-stroke: 1px black;font-weight:bold"

Tip: Right click on this page and click on inspect. Paste the above code in the console now.
Another tip: This tutorial is meant to impress noob. If you already know this, move on with your life.

You can have multiple CSS styles in a console.log() by using the format below.

console.log('%cb %cb ', 'color:blue;border:1px solid black', 'color:black;border:1px solid black');

You may be able to use CSS style with other methods in Console. While I still enjoy misusing the good old console.log in my code, the right approach would be to use a debug module like that allows you to show and hide the log easily.


Right click in this page to see the console.log().


What does the c in %c stand for?
a. CSS
b. Custom
c. Character
d. None of the above


New day new cringey video,

Top comments (5)

programmerpiyush008 profile image
Piyush Panchal

Amazing article! does this work if i run the js file with node?

nightdvlpr_50 profile image


yaireo profile image
Yair Even Or

I've authored "console colors", a tiny package which allows easy fun coloring:

navinrangar profile image
Navin Singh Rangar

interesting!! the writeup and the subject. thanks champ.

nightdvlpr_50 profile image

I've published a tiny package about this topic, also.