CARRD TEMPLATES

How it works

CARRD TEMPLATES

Back to tools

FREE WEBSITE TOOL

Scrolling Text Builder

Create scrolling text for your website. Customize the design, preview it, and copy the code.

Create a back to top button for your website. Customize its look and position, preview it, then copy the code.

✓

No account

✓

Customizable design

✓

Easy to install

01Add your text
02Style the live preview
03Copy the finished code

Scrolling text settings

Text

Add the messages you want to show.

Separator

Separator colorSeparator opacity100%

Separator size100%

Motion

DirectionSpeed50px/sPause on hoverMove with page scroll

Your ready-to-use code

One Inline Code Embed for Carrd

<!-- Scrolling text by CarrdTemplates.com -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap">
<style>
.ct-marquee-wfdmml{box-sizing:border-box!important;display:block!important;position:relative!important;width:100%!important;max-width:none!important;overflow:hidden!important;margin:0!important;padding:16px 0!important;background:rgba(29,29,29,1)!important;color:rgba(255,255,255,1)!important;font-family:"Inter", sans-serif!important;font-size:22px!important;font-weight:600!important;line-height:1.25!important;}
.ct-marquee-wfdmml *{box-sizing:border-box!important}
.ct-marquee-wfdmml .ctm-track{display:flex!important;width:max-content!important;max-width:none!important;align-items:center!important;margin:0!important;padding:0!important;will-change:transform;animation:ct-marquee-wfdmml-move var(--ctm-duration,20s) linear infinite;}
.ct-marquee-wfdmml .ctm-copy,.ct-marquee-wfdmml .ctm-unit,.ct-marquee-wfdmml .ctm-item{display:flex!important;flex:none!important;align-items:center!important;white-space:nowrap!important;margin:0!important;padding:0!important}
.ct-marquee-wfdmml .ctm-item{padding-right:28px!important}
.ct-marquee-wfdmml .ctm-text{color:rgba(255,255,255,1)!important;font:inherit!important;white-space:nowrap!important}
.ct-marquee-wfdmml .ctm-separator{display:inline-block!important;flex:none!important;margin-left:12px!important;color:rgba(255,255,255,1)!important;font-family:Arial,sans-serif!important;font-size:100%!important;font-weight:normal!important;line-height:1!important}
.ct-marquee-wfdmml .ctm-sr{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important}
@keyframes ct-marquee-wfdmml-move{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(hover:hover){.ct-marquee-wfdmml:hover .ctm-track{animation-play-state:paused!important}}
@media(prefers-reduced-motion:reduce){.ct-marquee-wfdmml .ctm-track{animation:none!important;transform:none!important;will-change:auto!important}}
</style>
<div class="ct-marquee-wfdmml"><span class="ctm-sr">Your message here · Add another message</span><div class="ctm-track" aria-hidden="true"><div class="ctm-copy"><div class="ctm-unit"><span class="ctm-item"><span class="ctm-text">Your message here</span><span class="ctm-separator">✦</span></span><span class="ctm-item"><span class="ctm-text">Add another message</span><span class="ctm-separator">✦</span></span></div></div><div class="ctm-copy"></div></div></div>
<script>
(function(){
  var script=document.currentScript,root=script&&script.previousElementSibling;
  if(!root||root.dataset.ctMarqueeReady)return;
  root.dataset.ctMarqueeReady='true';
  var track=root.querySelector('.ctm-track'),copies=root.querySelectorAll('.ctm-copy'),unit=root.querySelector('.ctm-unit'),frame=0,hovered=false;
  var sync=false,pause=true,right=false,speed=50;
  var reduce=window.matchMedia&&window.matchMedia('(prefers-reduced-motion: reduce)');
  function scroll(){if(!sync||!track||hovered||(reduce&&reduce.matches))return;var width=copies[0].getBoundingClientRect().width;if(!width)return;var offset=((window.scrollY||document.documentElement.scrollTop||0)*speed/50)%width;track.style.transform='translateX('+(-((right?width-offset:offset)%width))+'px)';}
  function build(){frame=0;if(!root.isConnected)return;while(copies[0].children.length>1)copies[0].lastElementChild.remove();copies[1].replaceChildren();var w=unit.getBoundingClientRect().width,viewport=root.clientWidth;if(!w||!viewport)return;var count=Math.min(8192,Math.max(1,Math.ceil(viewport/w)+1));var part=document.createDocumentFragment();for(var i=1;i<count;i++)part.appendChild(unit.cloneNode(true));copies[0].appendChild(part);copies[1].innerHTML=copies[0].innerHTML;var segment=copies[0].getBoundingClientRect().width;track.style.setProperty('--ctm-duration',(segment/speed)+'s');scroll();}
  function schedule(){if(!frame)frame=requestAnimationFrame(build);}
  if(window.ResizeObserver)new ResizeObserver(schedule).observe(root);else window.addEventListener('resize',schedule,{passive:true});
  if(document.fonts){if(document.fonts.ready)document.fonts.ready.then(schedule);if(document.fonts.addEventListener)document.fonts.addEventListener("loadingdone",schedule);}
  if(sync){window.addEventListener('scroll',scroll,{passive:true});if(pause){root.addEventListener('mouseenter',function(){hovered=true;});root.addEventListener('mouseleave',function(){hovered=false;scroll();});}}
  schedule();
})();
</script>

In Carrd, add an Embed where you want the scrolling text. Set Type to Code and Style to Inline. Paste the complete code, then publish and test. Requires Carrd Pro Standard or higher.

The Scrolling Text Builder is free thanks to you. Say thanks with a coffee on Ko-fi.

CARRD TEMPLATES

CARRD TEMPLATES

Scrolling Text Builder

Scrolling text settings

Text

Separator

Motion

Your ready-to-use code

CARRD TEMPLATES

Website templates for businesses, built with Carrd.

Tools

Journal

How it works

Contact

© 2026 Carrd Templates

Trusted by 1502+ customers.

CARRD TEMPLATES

Website templates for businesses, built with Carrd.

Tools

Journal

How it works

Contact

© 2026 Carrd Templates

Trusted by 1502+ customers.

CARRD TEMPLATES

Website templates for businesses, built with Carrd.

Tools

Journal

How it works

Contact

© 2026 Carrd Templates

Trusted by 1502+ customers.