Create a stylized console message and say hello to your fellow developers.
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
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.
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);
Note: It is also possible to print images into the console by using the
background-image CSS property.