The Lab | Text Decoration

Discover a collection of creative and dynamic text effects designed to enhance the visual appeal of your website. Whether you're looking to add subtle animations, striking transformations, or unique styles, this showcase includes examples and the corresponding code to bring your ideas to life.

To copy the code:
1- Click in the textarea box and select all text with Ctrl + A or Command + A
2- Ctrl + C / Command + C
To paste the code:
3 - Ctrl+ V / Command + V

Text with border //Paste this on <head>: <style> text { text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000; color: white; font-size: 2em; } </style> //Paste this on <body>: <p class="text">Text with border</p> Source \| Direct Code	Text with border //Paste this on <head>: <style> .textborder2 { filter: drop-shadow(1px 1px 0 black) drop-shadow(-1px 1px 0 black) drop-shadow(0 -1px 0 black) drop-shadow(1px 0 black); color: white; font-size: 2em; z-index: 10 } </style> //Paste this on <body>: <p class="textborder2">Text with border</p> Source \| Direct Code	Floating text //Paste this on <head>: <style> #float { text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0; font-style: italic; font-size: 2em; font-weight: bold; color: #fff; animation-name: floating; animation-duration: 3s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; } @keyframes floating { 0% { transform: translate(0, 0px); } 50% { transform: translate(0, 15px); } 100% { transform: translate(0, -0px); } } </style> //Paste this on <body>: <div id="float">raptor</div></p> Source \| Direct Code
Bubble Text //Put this before </head>: <style> #bubble { color:#EBF0FF; font-family:Times; font-size:45px; font-weight:bold; } </style> //Put this where you want the effect: <span id="bubble">bubble</span> //Put this right before </body>: <script type="text/javascript"> // <![CDATA[ var bgcolour = "#D6E1FF"; // background colour var fgcolour = "#B8CBFF"; // foreground colour var speed = 80; // speed of bubbling, lower is faster var shades = 12; // number of shades of bubble /**************************** * Bubbling Text Effect * (c)2003-13 mf2fm web-design * http://www.mf2fm.com/rv * * DON'T EDIT BELOW THIS BOX * ***************************/ var bubbcol = new Array(); var bubbshd; var bubbler, bubbtxt; var bubbchr = new Array(); function addLoadEvent(funky) { var oldonload = window.onload; if (typeof (oldonload) != 'function') window.onload = funky; else window.onload = function () { if (oldonload) oldonload(); funky(); } } addLoadEvent(bubbagump); function bubbagump() { if (document.getElementById) { var i, fg, bg, col; for (bubbler = 0; bubbler <= shades; bubbler++) { col = "#"; for (i = 1; i < 6; i += 2) { bg = parseInt(bgcolour.substring(i, i + 2), 16); fg = parseInt(fgcolour.substring(i, i + 2), 16); col += dechex(bg + (fg - bg) (bubbler / shades)); } bubbcol[bubbler + 1] = col; if (bubbler == Math.floor(shades / 2)) bubbshd = col; } bubbler = document.getElementById("bubble"); bubbtxt = bubbler.firstChild.nodeValue; while (bubbler.childNodes.length) bubbler.removeChild(bubbler.childNodes[0]); for (i = 0; i < bubbtxt.length; i++) { fg = document.createElement("span"); fg.setAttribute("id", "bubb" + i); fg.style.textShadow = bubbshd + " 0px 0px 2px"; fg.appendChild(document.createTextNode(bubbtxt.charAt(i))); bubbler.appendChild(fg); } bubbler = setInterval("bubbling()", speed); } } function dechex(dec) { dec = Math.floor(dec); return ((dec < 16) ? '0' : '') + dec.toString(16); } function bubbling() { var i, bubby; for (i = 0; i < bubbtxt.length; i++) { bubby = document.getElementById("bubb" + i); if (bubbchr[i]) { bubby.style.color = bubbcol[bubbchr[i]]; bubbchr[i] = (bubbchr[i] + 1) % bubbcol.length; } else if (Math.random() < 7.5 / (shades * bubbtxt.length)) bubbchr[i] = 1; } } // ]]> </script> Source \| Direct Code	Pop text //Paste this before </head>: <style> #pop { text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0; font-style: italic; font-size:2em; font-weight:bold; color: #fff; -webkit-animation: pop 1s ease-in-out infinite alternate; animation: pop 1s ease-in-out infinite alternate; -moz-animation: pop 1s ease-in-out infinite alternate; } @keyframes pop { from { transform:scale(0.95) } 50% { transform:scale(1) } to { transform:scale(0.95) } } @-webkit-keyframes pop { from { -webkit-transform:scale(0.95) } 50% { -webkit-transform:scale(1) } to { -webkit-transform:scale(0.95) } } </style> //Paste this where you want the text to pop: <div id="pop">The show must go on.</div> Source	B O U N C Y ! //Paste this before </head>: <style>.bouncyyy { font-size:4em; z-index: 99; animation: bounce 2s infinite; animation-timing-function: cubic-bezier(0.25, 0.85, 0.4, 1)} .letterone { animation-delay:0s; display:inline-block;} .lettertwo { animation-delay:0.2s; display:inline-block;} .letterthree { animation-delay:0.4s; display:inline-block; } .letterfour { animation-delay:0.6s; display:inline-block;} .letterfive { animation-delay:0.8s; display:inline-block;} .lettersix { animation-delay:1s; display:inline-block;} .letterseven { animation-delay:1.2s; display:inline-block;} @keyframes bounce { 0% { transform: scale(1,1) translateY(0); } 10% { transform: scale(1.1,.9) translateY(0); } 30% { transform: scale(.9,1.1) translateY(-30px); } 50% { transform: scale(1.05,.95) translateY(0); } 60% { transform: scale(1,1) translateY(-4px); } 100% { transform: scale(1,1) translateY(0); } }</style> //Paste this where you want your text to bounce: <p class="bouncyyy letterone">A</p><p class="bouncyyy lettertwo">L</p><p class="bouncyyy letterthree">L</p><p class="bouncyyy letterfour">I</p><p class="bouncyyy letterfive">S</p><p class="bouncyyy lettersix">O</p><p class="bouncyyy letterseven">N</p> Source \| Direct Code
B O U N C Y //Paste this before </head>: <style> @font-face { font-family:'cupcake'; src: url(https://dl.dropbox.com/s/dayh8onbivwmqq7/Cherry%20Cupcake%20Personal%20Use.ttf); } .bouncyyy { font-family:'cupcake'; font-size: 4em; z-index: 99; color: white; filter: drop-shadow(1px 1px 0 black) drop-shadow(-1px 1px 0 black) drop-shadow(0 -1px 0 black) drop-shadow(2px 0 black); animation: bounce 2s infinite; animation-timing-function: cubic-bezier(0.25, 0.85, 0.4, 1); } .letterone { animation-delay: 0s; display: inline-block; } .lettertwo { animation-delay: 0.1s; display: inline-block; } .letterthree { animation-delay: 0.15s; display: inline-block; } .letterfour { animation-delay: 0.2s; display: inline-block; } @keyframes bounce { 0% { transform: scale(1, 1) translateY(0); } 10% { transform: scale(1.1, .9) translateY(0); } 30% { transform: scale(.9, 1.1) translateY(-30px); transform: rotate(-10deg); } 50% { transform: scale(1.05, .95) translateY(0); transform: rotate(10deg); } 60% { transform: scale(1, 1) translateY(-4px); transform: rotate(-10deg); } 100% { transform: scale(1, 1) translateY(0); } } </style> //Paste this where you want the text to bounce: <p class="bouncyyy letterone">u</p><p class="bouncyyy lettertwo">k</p><p class="bouncyyy letterthree">a</p><p class="bouncyyy letterfour">!</p> Source \| Direct Code	Triple Border //Paste this before </head>: #text08 { text-shadow: -1px -1px 0 #F2E9E4, 1px -1px 0 #F2E9E4, -1px 1px 0 #F2E9E4, 1px 1px 0 #F2E9E4; -webkit-text-stroke: 2px #9a8c98; filter: drop-shadow(0px 1px #9a8c98) drop-shadow(0 -1px #9a8c98) drop-shadow(1px 0 #9a8c98) drop-shadow(-1px 0 #9a8c98); } //Paste this where you want the text with triple border: <p id="text08">Triple Border</p> Source	Glowing Text //Paste this before </head>: <style> @keyframes glow { 0% { text-shadow: 0 0 15px blue; } 50% { text-shadow: none; } 100% { text-shadow: 0 0 15px blue; } } @-webkit-keyframes glow { 0% { text-shadow: 0 0 15px blue; } 50% { text-shadow: 0 0 0; } 100% { text-shadow: 0 0 15px blue; } } #glow { background-clip: text; -webkit-text-fill-color: transparent; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: #000; font-weight:bold; font-size:2em; -webkit-animation: glow 2.0s linear infinite; -moz-animation: glow 2.0s linear infinite; -ms-animation: glow 2.0s linear infinite; -o-animation: glow 2.0s linear infinite; animation: glow 2.0s linear infinite; } </style> //Paste this where you want the text to glow: <div id="glow"> <strong> Glowing Text </strong> </div> Source
Shaky Text //Paste this before </head>: <style> #shakey { padding:4px; animation: shake 0.5s infinite; } @keyframes shake { 0% { transform: translate(1px, 1px) rotate(0deg); } 10% { transform: translate(-1px, -2px) rotate(-1deg); } 20% { transform: translate(-3px, 0px) rotate(1deg); } 30% { transform: translate(3px, 2px) rotate(0deg); } 40% { transform: translate(1px, -1px) rotate(1deg); } 50% { transform: translate(-1px, 2px) rotate(-1deg); } 60% { transform: translate(-3px, 1px) rotate(0deg); } 70% { transform: translate(3px, 1px) rotate(-1deg); } 80% { transform: translate(-1px, -1px) rotate(1deg); } 90% { transform: translate(1px, 2px) rotate(0deg); } 100% { transform: translate(1px, -2px) rotate(0deg); } } </style> //Paste this where you want the text to shake <p id="shakey">Hey There!</p> Source	Rolling Text //Paste this before </head>: <style> .candy { --color1: #1FD537; --color2: #E40010; -webkit-text-stroke: 1px black; background: repeating-linear-gradient( 45deg, var(--color1), var(--color1) 30px, var(--color2) 30px, var(--color2) 60px ); background-clip: text; color: transparent; -webkit-background-clip: text; font-size: 3em; animation: 40s linear 0s infinite move; } @keyframes move { from { background-position: 0px; } to { background-position: 1000px; } } </style> //Paste this where you want the text to have rolling colours: <div class="candy">Hey There!</div> Source	Marquee Text <marquee behavior="scroll" direction="right"> Marquee Text </marquee> //You can change the direction to left, up or down //You can change the behavior to slide or alternate Source
Tilting text //Paste this before </head>: <style> #scream { animation-name: hi; animation-duration: 2s; animation-iteration-count: infinite; line-height: 0em; bottom: -5px; position: relative; font-size: 2rem; text-align: center; font-family: sant joan; } @keyframes hi { 0% { transform: rotate(5deg); } 50% { transform: rotate(-5deg); } 100% { transform: rotate(5deg); } } </style> //Paste this where you want the text to tilt: <div id="scream"> tilting text</div> Source	ScRiPted <style> .scripted { filter: drop-shadow( 0 3px #9a6fb0) drop-shadow( 2px 0 #9a6fb0) drop-shadow( 0 -1px #ffa9c2) drop-shadow( -1px 0 #9a6fb0) drop-shadow( 0 5px white) drop-shadow( 5px 0 white) drop-shadow( 0 -5px white) drop-shadow( -5px 0 white) drop-shadow(1px 1px 0 rgba(172,172,172,0.6)) drop-shadow(1px 1px 0 rgba(172,172,172,0.6)) drop-shadow( 0 0 2px #424242); color:#FDE6FF; font-family: ecoder; font-size:2rem; } @font-face { font-family: ecoder; src: url(https://dl.dropbox.com/s/2wrgv8i3jsqkv6p/Ecoder-Italic.otf); } </style> <p class="scripted">ScRiPted<p> Source	Gradient Text //Paste this before </head>: <style> .txt-gradienttext{ background: linear-gradient(to top, #FFFDFE 2%, #FF78B1 100%); background-clip: text; -webkit-text-fill-color: transparent; -webkit-text-stroke-width: 0.5px; -webkit-text-stroke-color: #FE62B6; } </style> //Paste this where you want the text to be gradient: <p class="txt-gradienttext">Hey There!</p> Source
Glitchy Text on Hover <style> @keyframes textShadow { 0% { text-shadow: 0.4389924193300864px 0 1px rgba(255, 0, 0, 0.5), -0.4389924193300864px 0 1px rgba(0, 255, 255, 0.3), 0 0 3px; } 5% { text-shadow: 2.7928974010788217px 0 1px rgba(255, 0, 0, 0.5), -2.7928974010788217px 0 1px rgba(0, 255, 255, 0.3), 0 0 3px; } 10% { text-shadow: 0.02956275843481219px 0 1px rgba(255, 0, 0, 0.5), -0.02956275843481219px 0 1px rgba(0, 255, 255, 0.3), 0 0 3px; } 15% { text-shadow: 0.40218538552878136px 0 1px rgba(255, 0, 0, 0.5), -0.40218538552878136px 0 1px rgba(0, 255, 255, 0.3), 0 0 3px; } 20% { text-shadow: 3.4794037899852017px 0 1px rgba(255, 0, 0, 0.5), -3.4794037899852017px 0 1px rgba(0, 255, 255, 0.3), 0 0 3px; } 25% { text-shadow: 1.6125630401149584px 0 1px rgba(255, 0, 0, 0.5), -1.6125630401149584px 0 1px rgba(0, 255, 255, 0.3), 0 0 3px; } 30% { text-shadow: 0.7015590085143956px 0 1px rgba(255, 0, 0, 0.5), -0.7015590085143956px 0 1px rgba(0, 255, 255, 0.3), 0 0 3px; } 35% { text-shadow: 3.896914047650351px 0 1px rgba(255, 0, 0, 0.5), -3.896914047650351px 0 1px rgba(0, 255, 255, 0.3), 0 0 3px; } 40% { text-shadow: 3.870905614848819px 0 1px rgba(255, 0, 0, 0.5), -3.870905614848819px 0 1px rgba(0, 255, 255, 0.3), 0 0 3px; } 45% { text-shadow: 2.231056963361899px 0 1px rgba(255, 0, 0, 0.5), -2.231056963361899px 0 1px rgba(0, 255, 255, 0.3), 0 0 3px; } 50% { text-shadow: 0.08084290417898504px 0 1px rgba(255, 0, 0, 0.5), -0.08084290417898504px 0 1px rgba(0, 255, 255, 0.3), 0 0 3px; } 55% { text-shadow: 2.3758461067427543px 0 1px rgba(255, 0, 0, 0.5), -2.3758461067427543px 0 1px rgba(0, 255, 255, 0.3), 0 0 3px; } 60% { text-shadow: 2.202193051050636px 0 1px rgba(255, 0, 0, 0.5), -2.202193051050636px 0 1px rgba(0, 255, 255, 0.3), 0 0 3px; } 65% { text-shadow: 2.8638780614874975px 0 1px rgba(255, 0, 0, 0.5), -2.8638780614874975px 0 1px rgba(0, 255, 255, 0.3), 0 0 3px; } 70% { text-shadow: 0.48874025155497314px 0 1px rgba(255, 0, 0, 0.5), -0.48874025155497314px 0 1px rgba(0, 255, 255, 0.3), 0 0 3px; } 75% { text-shadow: 1.8948491305757957px 0 1px rgba(255, 0, 0, 0.5), -1.8948491305757957px 0 1px rgba(0, 255, 255, 0.3), 0 0 3px; } 80% { text-shadow: 0.0833037308038857px 0 1px rgba(255, 0, 0, 0.5), -0.0833037308038857px 0 1px rgba(0, 255, 255, 0.3), 0 0 3px; } 85% { text-shadow: 0.09769827255241735px 0 1px rgba(255, 0, 0, 0.5), -0.09769827255241735px 0 1px rgba(0, 255, 255, 0.3), 0 0 3px; } 90% { text-shadow: 3.443339761481782px 0 1px rgba(255, 0, 0, 0.5), -3.443339761481782px 0 1px rgba(0, 255, 255, 0.3), 0 0 3px; } 95% { text-shadow: 2.1841838852799786px 0 1px rgba(255, 0, 0, 0.5), -2.1841838852799786px 0 1px rgba(0, 255, 255, 0.3), 0 0 3px; } 100% { text-shadow: 2.6208764473832513px 0 1px rgba(255, 0, 0, 0.5), -2.6208764473832513px 0 1px rgba(0, 255, 255, 0.3), 0 0 3px; } } .rgb { transition: .3s; } .rgb:hover { animation: textShadow 1.6s infinite; transition: .3s; } </style> <p class="rgb">Glitchy Text</p> Source	Blinky Text <style> .blinky { animation: blink 1s step-end infinite; padding-block: inline; } @keyframes blink { 0% { opacity: 1; } 50% { opacity: 0; } } </style> <p class="blinky">Blinky Text</p> Source	Neon Text <style> .neon-text { color: #fff; text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #ff4da6, 0 0 40px #ff4da6, 0 0 80px #ff4da6, 0 0 90px #ff4da6, 0 0 100px #ff4da6, 0 0 150px #ff4da6; } </style> <p class="neon-text">Neon Text</p> Created by myself
3D Text <style> .text-3d { color: #000000; text-shadow: 1px 1px #f2f2f2, 2px 2px #f2f2f2, 3px 3px #f2f2f2, 4px 4px #f2f2f2, 5px 5px #ccc, 6px 6px #ccc, 7px 7px #ccc; } </style> <p class="text-3d">3D Text</p> Created by myself	Typewriter Text <style> .typewriter { overflow: hidden; border-right: .15em solid black; white-space: nowrap; margin: 0 auto; letter-spacing: .15em; animation: typing 3.5s steps(30, end), blink-caret .5s step-end infinite; } @keyframes typing { from { width: 0 } to { width: 100% } } @keyframes blink-caret { from, to { border-color: transparent } 50% { border-color: black } } </style> <p class="typewriter">Typewriter Text</p> Created by myself	Rainbow Text Rainbow Text Rainbow Text <style> .rainbow-text { background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); background-clip: text; color: transparent; font-size: 2em; } </style> <p class="rainbow-text">Rainbow Text</p> Created by myself
Pulsing Text <style> .pulse-text { animation: pulse 1.5s infinite; } @keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } } </style> <p class="pulse-text">Pulsing Text</p> Created by myself	Blurred Text <style> .blur-text { color: transparent; text-shadow: 0 0 5px rgba(0, 0, 0, 0.5); } </style> <p class="blur-text">Blurred Text</p> Created by myself	Rotating Text <style> .rotate-text { display: inline-block; animation: rotate 3s linear infinite; } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } </style> <p class="rotate-text">Rotating Text</p> Created by myself
Multiple Shadow Text <style> .multi-shadow-text { color: #000000; text-shadow: 2px 2px 0px #ff7eb3, 4px 4px 0px #ff7eb3, 6px 6px 0px #ff7eb3, 8px 8px 0px #ff7eb3, 10px 10px 0px #ff7eb3; } </style> <p class="multi-shadow-text">Multiple Shadow Text</p> Created by myself	Two Shadows Text <style> .break-text { position: relative; display: inline-block; } .break-text::before { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, rgba(255, 0, 0, 0.5), rgba(255, 255, 255, 0.5), rgba(0, 13, 255, 0.5)); clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); animation: break 2s infinite; } @keyframes break { 0%, 100% { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); } 50% { clip-path: polygon(50% 0%, 50% 0%, 50% 100%, 50% 100%); } } </style> <p class="break-text" data-text="">Two Shadows Text</p><br> // If you add text in data-text it will change the effect Created by myself	Sliding Text <style> .sliding-text { display: inline-block; animation: slide 3s infinite ease-in-out; } @keyframes slide { 0% { transform: translateX(0); } 50% { transform: translateX(20px); } 100% { transform: translateX(0); } } </style> <p class="sliding-text">Sliding Text</p> Created by myself
Invert Color on Hover Text <style> .invert-text { transition: filter 0.5s ease; color: #1FD537; } .invert-text:hover { filter: invert(1); } </style> <p class="invert-text">Invert Color on Hover Text</p> Created by myself	Animated Gradient Text <style> .animated-gradient-text { background: linear-gradient(90deg, #ff7eb3, #002aff, #9d00ff); background-clip: text; color: transparent; background-size: 200% auto; animation: gradient 3s infinite; } @keyframes gradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } </style> <p class="animated-gradient-text">Animated Gradient Text</p> Created by myself	Expanding Text <style> .expand-text { display: inline-block; animation: expand 2s infinite ease-in-out; } @keyframes expand { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(1.5); } } </style> <p class="expand-text">Expanding Text</p> Created by myself
Rainbow Color Cycle Text <style> .color-cycle-text { background: linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet); background-clip: text; color: transparent; background-size: 200% auto; animation: colorCycle 4s infinite; } @keyframes colorCycle { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } } </style> <p class="color-cycle-text">Rainbow Color Cycle Text</p> Created by myself	Rainbow Shadow Text <style> .rainbow-shadow-text { color: #ffffff; text-shadow: 2px 2px 5px red, 4px 4px 5px orange, 6px 6px 5px yellow, 8px 8px 5px green, 10px 10px 5px blue, 12px 12px 5px indigo, 14px 14px 5px violet; } </style> <p class="rainbow-shadow-text">Rainbow Shadow Text</p> Created by myself	Mirror Text <style> .mirror-text { position: relative; display: inline-block; } .mirror-text::after { content: attr(data-text); position: absolute; top: 100%; left: 0; transform: scaleY(-1); opacity: 0.5; } </style> <p class="mirror-text" data-text="Mirror Text">Mirror Text</p> Created by myself
Flipping Text <style> .vertical-flip-text { display: inline-block; animation: verticalFlip 2s infinite; } @keyframes verticalFlip { 0%, 100% { transform: rotateX(0deg); } 50% { transform: rotateX(180deg); } } </style> <p class="vertical-flip-text">Flipping Text</p> Created by myself	Fill Color Text <style> .fill-color-text { position: relative; overflow: hidden; } .fill-color-text::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to right, transparent, #ff7eb3, transparent); animation: fillColor 3s infinite; } @keyframes fillColor { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } </style> <p class="fill-color-text">Fill Color Text</p> Created by myself	Double Shadow Text <style> .double-shadow-text { color: #fff; text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5), -2px -2px 5px rgba(0, 0, 0, 0.5); } </style> <p class="double-shadow-text">Double Shadow Text</p> Created by myself