Skip to content

Instantly share code, notes, and snippets.

@sahilatahar
Created June 15, 2024 11:59
Show Gist options
  • Save sahilatahar/6ad6449fc468834f76722f04a12c5414 to your computer and use it in GitHub Desktop.
Save sahilatahar/6ad6449fc468834f76722f04a12c5414 to your computer and use it in GitHub Desktop.
This gist demonstrates how to style text in the browser console using JavaScript and CSS. It includes 100 examples like gradient text, neon effects, and more.

To style text in the browser console using JavaScript, you can use CSS styling within the console.log function. Here's a step-by-step guide on how to do it:

Follow these steps:

  1. Open Browser Console:

    • Open your web browser (Chrome, Firefox, etc.).
    • Right-click anywhere on the webpage and select "Inspect" or press Ctrl + Shift + I (Cmd + Option + I on macOS) to open the Developer Tools.
    • Navigate to the "Console" tab.
  2. Use console.log with CSS Styling:

    • In the console, you can use the console.log function to print messages with CSS styling.
    • Syntax: console.log('%c Your Text Here', 'Your CSS Styles');
  3. Example:

    • Let's say you want to print "Styled Text" in the console with a green color and a background color of black:

      console.log(
      	"%c Styled Text",
      	"color: green; background-color: black; padding: 8px; font-size: 20px;"
      )

      Here's what each part means:

      • %c is a placeholder that tells console.log that the following string will be styled using CSS.
      • 'Styled Text' is the text you want to display.
      • 'color: green; background-color: black; padding: 8px; font-size: 20px;' is the CSS style applied to the text. You can specify any valid CSS properties here.
  4. View the Output:

    • After typing the console.log statement and pressing Enter, you'll see the styled text output in the console with the specified styles.

Tips:

  • You can combine multiple CSS properties to achieve different effects like text color, background color, font size, padding, etc.
  • Make sure to use valid CSS syntax within the quotes following %c.

Example:

Here's a more elaborate example showcasing a subtle neon text effect:

console.log(
	"%c 90. Subtle Neon Text Effect",
	"font-size: 24px; color: #e0f3ff; text-shadow: 1px 1px 2px #000, 0 0 25px #00bfff, 0 0 5px #00bfff;"
)

For more examples, see javascript file below which contains 100 examples

// This file contains 100 examples of text effects using console.log()
// Basic styles
console.log("%c 1. Basic Bold Text", "font-weight: bold;")
console.log("%c 2. Italic Text", "font-style: italic;")
console.log("%c 3. Underlined Text", "text-decoration: underline;")
console.log("%c 4. Blue Text", "color: blue;")
console.log(
"%c 5. Red Background",
"background-color: red; color: white; padding: 2px 8px;"
)
// Font size and family
console.log("%c 6. Large Text", "font-size: 24px;")
console.log("%c 7. Small Text", "font-size: 10px;")
console.log("%c 8. Comic Sans MS Font", "font-family: 'Comic Sans MS';")
// Background and border
console.log(
"%c 9. Yellow Background",
"background-color: yellow; padding: 2px 8px;"
)
console.log("%c 10. Green Border", "border: 2px solid green; padding: 2px 8px;")
// Padding and margin
console.log(
"%c 11. Padding 10px",
"padding: 10px; background-color: lightblue;"
)
console.log("%c 12. Margin 5px", "margin: 5px; background-color: lightgreen;")
// Text alignment
console.log(
"%c 13. Centered Text",
"text-align: center; background-color: lightcoral; padding: 2px 0;"
)
// Text shadow
console.log("%c 14. Text with Shadow", "text-shadow: 2px 2px 4px #000000;")
// Gradient text
console.log(
"%c 15. Gradient Text",
"font-size: 24px; background: linear-gradient(to right, violet, indigo, blue, green, yellow, orange, red); -webkit-background-clip: text; color: transparent;"
)
// Box shadow
console.log(
"%c 16. Box with Shadow",
"box-shadow: 5px 5px 5px #888888; padding: 10px;"
)
// Rounded corners
console.log(
"%c 17. Rounded Box",
"border-radius: 10px; padding: 5px; background-color: lightgray;"
)
// Multiple styles
console.log(
"%c 18. Multiple Styles",
"font-size: 18px; font-weight: bold; color: #4CAF50; text-shadow: 1px 1px 2px rgba(0,0,0,0.8);"
)
// Text transform
console.log("%c 19. Uppercase Text", "text-transform: uppercase;")
// Opacity
console.log("%c 20. Transparent Text", "opacity: 0.6;")
// Rainbow effect
console.log(
"%c 21. Rainbow Text",
"font-size: 24px; background: linear-gradient(to right, violet, indigo, blue, green, yellow, orange, red); -webkit-background-clip: text; color: transparent;"
)
// Blinking text (not supported in all browsers)
console.log(
"%c 22. Blinking Text",
"animation: blink-animation 1s infinite; @keyframes blink-animation { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } }"
)
// Code blocks
console.log(
"%c 23. Code Block",
"font-family: 'Courier New', Courier, monospace; font-size: 14px; background-color: #f0f0f0; padding: 5px;"
)
// Gradient background
console.log(
"%c 24. Gradient Background",
"background: linear-gradient(to right, #ff9966, #ff5e62); padding: 10px; color: white; font-size: 18px; border-radius: 0.5rem;"
)
// Transparent background
console.log(
"%c 25. Transparent Background",
"background-color: rgba(0, 0, 255, 0.2); padding: 5px;"
)
// Glowing text effect
console.log(
"%c 26. Glowing Text",
"text-shadow: 0 0 5px #00ff00, 0 0 10px #00ff00, 0 0 15px #00ff00;"
)
// Neon text effect
console.log(
"%c 27. Neon Text",
"color: #fff; text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #ff00de, 0 0 20px #ff00de, 0 0 30px #ff00de, 0 0 40px #ff00de;"
)
// 3D text effect
console.log(
"%c 28. 3D Text",
"text-shadow: 1px 1px 2px #333, 0 0 25px #00ff00, 0 0 5px #fff; font-size: 24px;"
)
// Animated underline
console.log(
"%c 29. Animated Underline",
"background-image: linear-gradient(0deg, #000, #000), linear-gradient(0deg, #000, #000); background-position: 0 100%, 0 100%; background-size: 0 2px, 100% 2px; background-repeat: no-repeat; transition: background-size 0.3s;"
)
// Dark mode text
console.log(
"%c 30. Dark Mode Text",
"color: white; background-color: #333; padding: 5px;"
)
// Hover effect
console.log(
"%c 31. Hover Effect",
"transition: transform 0.3s; &:hover { transform: scale(1.1); }"
)
// CSS grid text
console.log(
"%c 32. CSS Grid Text",
"display: inline-grid; grid-template-columns: 1fr 1fr 1fr; gap: 5px; background-color: lightblue; padding: 5px;"
)
// Text animation
console.log(
"%c 33. Text Animation",
"animation: slidein 3s ease-in-out infinite; @keyframes slidein { 0% { transform: translateY(-100%); } 100% { transform: translateY(0); } }"
)
// Star Wars opening crawl effect
console.log(
"%c 34. Star Wars Crawl",
"font-family: 'Star Jedi', sans-serif; font-size: 18px; white-space: pre-line; color: yellow; text-align: justify; text-shadow: 0 0 10px #ffff00, 0 0 20px #ffbf00, 0 0 30px #ff8000, 0 0 40px #ff4000, 0 0 50px #ff0000, 0 0 60px #ff0000, 0 0 70px #ff0000;"
)
// Matrix digital rain effect
console.log(
"%c 35. Matrix Digital Rain",
"font-family: 'Courier New', Courier, monospace; font-size: 14px; color: #0f0; line-height: 1; white-space: pre-wrap; position: absolute; left: 0; top: 0; z-index: 1; animation: animate 10s linear infinite; @keyframes animate { 0% { transform: translateY(0); } 100% { transform: translateY(-100%); } }"
)
// Emoji text
console.log("%c 36. Emoji Text 😊🎉", "font-size: 24px;")
// ASCII art
console.log(
`%c
37. ASCII Art
/$$$$$$$ /$$ /$$
| $$__ $$|__/ | $$
| $$ \\ $$ /$$ /$$$$$$$| $$$$$$$
| $$ | $$| $$ /$$_____/| $$__ $$
| $$ | $$| $$| $$ | $$ \\ $$
| $$ | $$| $$| $$$$$$$| $$ | $$
|__/ |__/|__/ \\_______/|__/ |__/
/$$ /$$ /$$ /$$ /$$
| $$$ /$$$|__/| $$| $$
| $$$$ /$$$$ /$$| $$| $$
| $$ $$/$$ $$| $$| $$| $$
| $$ $$$| $$| $$| $$| $$
| $$\\ $ | $$| $$| $$| $$
| $$ \\/ | $$| $$| $$| $$$$$$$$
|__/ |__/|__/|__/|________/
`,
"font-family: monospace; font-size: 14px;"
)
// 3D box with text
console.log(
"%c 38. 3D Box with Text",
"text-shadow: 1px 1px 2px #333, 0 0 25px #00ff00, 0 0 5px #fff; font-size: 24px; background-color: black; padding: 20px; transform: perspective(400px) rotateX(25deg);"
)
// Zebra stripes effect
console.log(
"%c 39. Zebra Stripes Text",
"background: repeating-linear-gradient(45deg, black, black 10px, white 10px, white 20px); color: white; padding: 10px;"
)
// Text with border
console.log(
"%c 40. Text with Border",
"color: red; font-size: 24px; -webkit-text-stroke: 1px black;"
)
// Rainbow border
console.log(
"%c 41. Rainbow Border",
"font-size: 24px; color: white; background-image: linear-gradient(to right, violet, indigo, blue, green, yellow, orange, red); padding: 5px; border: 3px solid transparent; -webkit-background-clip: text;"
)
// Retro text
console.log(
"%c 42. Retro Text",
"font-size: 24px; color: purple; text-shadow: 3px 3px 0px #000, 0px 0px 5px rgba(255, 255, 255, 0.5);"
)
// Typewriter effect
console.log(
"%c 43. Typewriter Effect",
"font-family: monospace; overflow: hidden; white-space: nowrap; margin: 0 auto; letter-spacing: .15em; animation: typing 1s steps(10, end), blink-caret .75s step-end infinite; @keyframes typing { from { width: 0; } to { width: 100%; } } @keyframes blink-caret { from, to { border-color: transparent; } 50% { border-color: orange; } }"
)
// Dinosaur ASCII art
console.log(
`%c
45. Dinosaur ASCII Art
__
/ _)
_.----._/ /
/ /
__/ ( | ( |
/__.-'|_|--|_|
`,
"font-family: monospace;"
)
// Gradient text with neon glow
console.log(
"%c 46. Gradient Text with Neon Glow",
"font-size: 24px; background: linear-gradient(to right, #ffcc00, #ff00cc); -webkit-background-clip: text; color: transparent; text-shadow: 0 0 10px #00ffcc, 0 0 20px #ff00cc, 0 0 30px #ff00cc;"
)
// CSS variables and animation
console.log(
"%c 47. CSS Variables and Animation",
"font-size: 24px; color: var(--primary-color); background-color: var(--secondary-color); padding: 10px; --primary-color: blue; --secondary-color: lightblue; animation: color-change 2s linear infinite; @keyframes color-change { 0% { --primary-color: blue; --secondary-color: lightblue; } 50% { --primary-color: red; --secondary-color: yellow; } 100% { --primary-color: blue; --secondary-color: lightblue; } }"
)
// Flip text effect
console.log(
"%c 48. Flip Text Effect",
"font-size: 24px; background-color: black; color: white; transform: scaleX(-1); display: inline-block; padding: 5px;"
)
// Glitch effect
console.log(
"%c 49. Glitch Text Effect",
"font-size: 24px; background: linear-gradient(to right, #ffcc00, #ff00cc); -webkit-background-clip: text; color: transparent; text-shadow: 0 0 10px #00ffcc, 0 0 20px #ff00cc, 0 0 30px #ff00cc; animation: glitch 1s linear infinite; @keyframes glitch { 0% { transform: translate(0); } 25% { transform: translate(-5px, 5px); } 50% { transform: translate(5px, -5px); } 75% { transform: translate(-5px, 5px); } 100% { transform: translate(0); } }"
)
// ASCII heart
console.log(
`%c
50. ASCII Heart
/\\ /\\
/ \\/ \\
\\ /
\\ /
\\ /
\\/
`,
"font-family: monospace;"
)
// 8-bit text
console.log(
"%c 51. 8-bit Text",
"font-size: 24px; letter-spacing: 3px; font-family: 'Press Start 2P', cursive; color: #00FF00; text-shadow: 2px 2px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;"
)
// Water reflection effect
console.log(
"%c 52. Water Reflection Text Effect",
"font-size: 24px; background: linear-gradient(to right, #00c6ff, #0072ff); -webkit-background-clip: text; color: transparent; text-shadow: 0 0 5px rgba(0,0,0,0.5);"
)
// SVG text effect
console.log(
"%c 53. SVG Text Effect",
"font-size: 24px; background-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20200%2050%22%3E%3Ctext%20x=%2210%22%20y=%2235%22%20font-family=%22Verdana,%20sans-serif%22%20font-size=%2230%22%20fill=%22orange%22%3EHello%3C/text%3E%3C/svg%3E'); -webkit-background-clip: text; color: transparent;"
)
// 3D shadow text
console.log(
"%c 54. 3D Shadow Text Effect",
"font-size: 24px; color: #fff; text-shadow: 1px 1px 0 #000, 2px 2px 0 #000, 3px 3px 0 #000, 4px 4px 0 #000, 5px 5px 0 #000, 6px 6px 0 #000, 7px 7px 0 #000, 8px 8px 0 #000, 9px 9px 0 #000, 10px 10px 0 #000, 11px 11px 0 #000, 12px 12px 0 #000, 13px 13px 0 #000, 14px 14px 0 #000, 15px 15px 0 #000, 16px 16px 0 #000, 17px 17px 0 #000, 18px 18px 0 #000, 19px 19px 0 #000, 20px 20px 0 #000;"
)
// Pixel art text
console.log(
"%c 55. Pixel Art Text Effect",
"font-size: 24px; font-family: 'Press Start 2P', cursive;"
)
// ASCII fire
console.log(
`%c
56. ASCII Fire
/\\ /\\
/ ^ ^ \\
/__*__\\
||
`,
"font-family: monospace;"
)
// Bold text with shadow
console.log(
"%c 57. Bold Text with Shadow",
"font-weight: bold; text-shadow: 2px 2px 5px #333;"
)
// Text outline
console.log(
"%c 58. Text Outline",
"font-size: 24px; color: #fff; -webkit-text-stroke: 1px black;"
)
// Ice effect
console.log(
"%c 59. Ice Effect",
"font-size: 24px; color: lightblue; text-shadow: 1px 1px 2px #99ccff, 0 0 25px #ccffff, 0 0 5px #ffffff;"
)
// Glowing border
console.log(
"%c 60. Glowing Border",
"font-size: 24px; color: white; background: linear-gradient(to right, violet, indigo, blue, green, yellow, orange, red); -webkit-background-clip: text; border: 3px solid transparent; border-image: linear-gradient(to right, violet, indigo, blue, green, yellow, orange, red); border-image-slice: 1; padding: 5px;"
)
// Harry Potter text effect
console.log(
"%c 61. Harry Potter Text Effect",
"font-size: 24px; font-family: 'Harry P'; color: #ffffff; text-shadow: 1px 1px 1px #000000;"
)
// Handwriting text effect
console.log(
"%c 62. Handwriting Text Effect",
"font-size: 24px; font-family: 'Handlee', cursive;"
)
// Transparent text with blur
console.log(
"%c 63. Transparent Text with Blur",
"font-size: 24px; color: transparent; text-shadow: 0 0 10px rgba(0,0,0,0.5);"
)
// Abstract text art
console.log(
`%c
64. Abstract Text Art
/\\_/\\
( o.o )
> ^ <
`,
"font-family: monospace;"
)
// Emoji background
console.log(
"%c 65. Emoji Background",
"background-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22%20width=%2224%22%20height=%2224%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20d=%22M11%2014h2v2h-2v-2zm-2-5h6v6h-6v-6z%22/%3E%3C/svg%3E'); padding: 20px;"
)
// Stroke text effect
console.log(
"%c 66. Stroke Text Effect",
"font-size: 24px; -webkit-text-stroke: 2px black; color: white;"
)
// Rotated text
console.log("%c 67. Rotated Text", "font-size: 24px; transform: rotate(30deg);")
// Flashing text effect
console.log(
"%c 68. Flashing Text Effect",
"font-size: 24px; animation: flash 1s infinite; @keyframes flash { 0%, 49.99%, 100% { opacity: 1; } 50%, 99.99% { opacity: 0; } }"
)
// Rainbow outline
console.log(
"%c 69. Rainbow Outline",
"font-size: 24px; color: white; -webkit-text-stroke: 1px red; text-shadow: 0 0 5px orange, 0 0 10px yellow, 0 0 15px green, 0 0 20px blue, 0 0 25px indigo, 0 0 30px violet;"
)
// Gradient outline
console.log(
"%c 70. Gradient Outline",
"font-size: 24px; color: white; -webkit-text-stroke: 1px black; background: linear-gradient(to right, #ffcc00, #ff00cc); -webkit-background-clip: text;"
)
// Pulsating text effect
console.log(
"%c 71. Pulsating Text Effect",
"font-size: 24px; animation: pulse 1s infinite; @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } }"
)
// Kinetic typography
console.log(
"%c 72. Kinetic Typography",
"font-size: 24px; font-family: 'Montserrat', sans-serif; white-space: nowrap; overflow: hidden; border-right: .15em solid orange; animation: typing 2s steps(40, end), blink-caret 0.75s step-end infinite; @keyframes typing { from { width: 0 } to { width: 100% } } @keyframes blink-caret { from, to { border-color: transparent } 50% { border-color: orange; } }"
)
// Underwater text effect
console.log(
"%c 73. Underwater Text Effect",
"font-size: 24px; color: #00e0ff; text-shadow: 0 0 5px #00e0ff, 0 0 10px #00e0ff, 0 0 15px #00e0ff, 0 0 20px #00e0ff, 0 0 25px #00e0ff, 0 0 30px #00e0ff, 0 0 35px #00e0ff;"
)
// Neon glow effect
console.log(
"%c 74. Neon Glow Effect",
"font-size: 24px; color: #fff; text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #f0f, 0 0 20px #0ff, 0 0 30px #0ff, 0 0 40px #0ff, 0 0 50px #0ff;"
)
// Hacker text effect
console.log(
"%c 75. Hacker Text Effect",
"font-size: 24px; font-family: 'Courier New', Courier, monospace; background-color: black; color: green; padding: 10px;"
)
// Bokeh text effect
console.log(
"%c 76. Bokeh Text Effect",
"font-size: 24px; background: url(https://i.imgur.com/MgBct4W.jpg) repeat; -webkit-background-clip: text; color: transparent;"
)
// Dripping text effect
console.log(
"%c 77. Dripping Text Effect",
"font-size: 24px; color: yellow; text-shadow: 0 0 10px yellow, 0 0 20px yellow, 0 0 30px yellow, 0 0 40px yellow, 0 0 50px yellow, 0 0 60px yellow, 0 0 70px yellow;"
)
// Heartbeat pulse effect
console.log(
"%c 78. Heartbeat Pulse Effect",
"font-size: 24px; animation: heartbeat 1s infinite; @keyframes heartbeat { 0% { transform: scale(1); } 50% { transform: scale(1.3); } 100% { transform: scale(1); } }"
)
// Sparkling text effect
console.log(
"%c 79. Sparkling Text Effect",
"font-size: 24px; color: transparent; background-image: url('https://media.giphy.com/media/YMzJpI5S0YiUO/giphy.gif'); -webkit-background-clip: text; background-clip: text; animation: sparkle 2s linear infinite; @keyframes sparkle { 0%, 100% { background-position: -100% -100%; } 50% { background-position: 100% 100%; } }"
)
// Snowy text effect
console.log(
"%c 80. Snowy Text Effect",
"font-size: 24px; color: transparent; background-image: url('https://media.giphy.com/media/gnLyHi9c17AYc/giphy.gif'); -webkit-background-clip: text; background-clip: text; animation: snow 2s linear infinite; @keyframes snow { 0%, 100% { background-position: 0 0; } 50% { background-position: 100% 100%; } }"
)
// Matrix digital rain effect
console.log(
"%c 81. Matrix Digital Rain Effect",
"font-size: 24px; color: green; font-family: 'Consolas', monospace; white-space: pre; overflow: hidden;"
)
// Transparent background with border
console.log(
"%c 82. Transparent Background with Border",
"font-size: 24px; color: #fff; background-color: rgba(0,0,0,0.5); padding: 10px; border: 2px dashed #fff;"
)
// Alien text effect
console.log(
"%c 83. Alien Text Effect",
"font-size: 24px; font-family: 'Coda', cursive; color: green; text-shadow: 0 0 10px rgba(0,255,0,0.5), 0 0 20px rgba(0,255,0,0.5), 0 0 30px rgba(0,255,0,0.5), 0 0 40px rgba(0,255,0,0.5);"
)
// Cracked text effect
console.log(
"%c 84. Cracked Text Effect",
"font-size: 24px; font-family: 'Impact', sans-serif; color: #f00; text-shadow: 0 0 5px #f00, 0 0 10px #f00, 0 0 15px #f00, 0 0 20px #f00, 0 0 25px #f00, 0 0 30px #f00, 0 0 35px #f00;"
)
// Cyberpunk text effect
console.log(
"%c 85. Cyberpunk Text Effect",
"font-size: 24px; font-family: 'Orbitron', sans-serif; color: #0f0; text-shadow: 0 0 5px #0f0, 0 0 10px #0f0, 0 0 15px #0f0, 0 0 20px #0f0, 0 0 25px #0f0, 0 0 30px #0f0, 0 0 35px #0f0;"
)
// Rustic text effect
console.log(
"%c 86. Rustic Text Effect",
"font-size: 24px; font-family: 'Marck Script', cursive; color: #964B00; text-shadow: 1px 1px 2px #000;"
)
// Ink bleed text effect
console.log(
"%c 87. Ink Bleed Text Effect",
"font-size: 24px; font-family: 'Fascinate', cursive; color: #c71585; text-shadow: 1px 1px 2px #000;"
)
// Mosaic text effect
console.log(
"%c 88. Mosaic Text Effect",
"font-size: 24px; font-family: 'VT323', monospace; color: #00ff00; text-shadow: 1px 1px 0 #000, 2px 2px 0 #000, 3px 3px 0 #000, 4px 4px 0 #000, 5px 5px 0 #000, 6px 6px 0 #000, 7px 7px 0 #000, 8px 8px 0 #000, 9px 9px 0 #000, 10px 10px 0 #000, 11px 11px 0 #000, 12px 12px 0 #000, 13px 13px 0 #000, 14px 14px 0 #000, 15px 15px 0 #000, 16px 16px 0 #000, 17px 17px 0 #000, 18px 18px 0 #000, 19px 19px 0 #000, 20px 20px 0 #000;"
)
// Skywriting text effect
console.log(
"%c 89. Skywriting Text Effect",
"font-size: 24px; font-family: 'Permanent Marker', cursive; color: #4682b4; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);"
)
// Subtle neon text effect
console.log(
"%c 90. Subtle Neon Text Effect",
"font-size: 24px; color: #e0f3ff; text-shadow: 1px 1px 2px #000, 0 0 25px #00bfff, 0 0 5px #00bfff;"
)
// Pixelated text effect
console.log(
"%c 91. Pixelated Text Effect",
"font-size: 24px; font-family: 'Press Start 2P', cursive;"
)
// Iceberg text effect
console.log(
"%c 92. Iceberg Text Effect",
"font-size: 24px; color: #ADD8E6; text-shadow: 1px 1px 2px #000;"
)
// Lava text effect
console.log(
"%c 93. Lava Text Effect",
"font-size: 24px; color: #FF4500; text-shadow: 1px 1px 2px #000;"
)
// Night sky text effect
console.log(
"%c 94. Night Sky Text Effect",
"font-size: 24px; color: #000080; text-shadow: 1px 1px 2px #FFFFFF;"
)
// Vintage text effect
console.log(
"%c 95. Vintage Text Effect",
"font-size: 24px; color: #8B4513; text-shadow: 1px 1px 2px #000;"
)
// Pastel text effect
console.log(
"%c 96. Pastel Text Effect",
"font-size: 24px; color: #FFDAB9; text-shadow: 1px 1px 2px #000;"
)
// Silhouette text effect
console.log(
"%c 97. Silhouette Text Effect",
"font-size: 24px; color: #000; text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);"
)
// Vaporwave text effect
console.log(
"%c 98. Vaporwave Text Effect",
"font-size: 24px; font-family: 'Roboto', sans-serif; color: #FF69B4; text-shadow: 1px 1px 2px #000;"
)
// Comic book text effect
console.log(
"%c 99. Comic Book Text Effect",
"font-size: 24px; font-family: 'Comic Sans MS', cursive; color: #FFD700; text-shadow: 1px 1px 2px #000;"
)
// Pop art text effect
console.log(
"%c 100. Pop Art Text Effect",
"font-size: 24px; font-family: 'Anton', sans-serif; color: #FF4500; text-shadow: 1px 1px 2px #000;"
)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment