Let's be fancy with a console signature

Featured on Hashnode

Create a stylized console message and say hello to your fellow developers.

Console log signature

Let's get started

First you should know that a console message, which is the first argument of a console.log, can be formatted using other arguments.

console.log("I'm the message");

There are different ways to format a console message but the only one that is useful in this specific case is the %c formatter.

console.log("%cI'm the message");

%c applies to the console message CSS rules that are defined by the second argument.

console.log("%cI'm the message", "background: red;");

And that's already all you need to know to create your own console signature.

Example

var consoleSignatureStyle = "font-size: 16px;" +
  "background: linear-gradient(to right, #e66465, #9198e5);" +
  "color: white;" +
  "text-align: center;" +
  "padding: 10px 15px;" +
  "width: 100%;" +
  "border-radius: 20px;";

var consoleSignatureText = "%cDon't steal my cookies! 🍪";

console.log(consoleSignatureText, consoleSignatureStyle);

Console signature example

Note: It is also possible to print images into the console by using the background-image CSS property.


If you like my posts follow me on hashnode, dev.to and twitter!

Gourav Khunger's photo

I did not know this. It's awesome! Thanks for sharing 🔥

Shailesh Kumar Sundram's photo

Such a handy tip!

Stefan Natter's photo

This is one of my favorite and easy to set up growth hacks for software agencies and companies in general. Make developers curious when they inspect your source code.

Joyancefa's photo

Thanks for sharing! Always wondered how to do this. I liked how short the article is 💪🏾