CARRD TEMPLATES

How it works

CARRD TEMPLATES

Back to tools

FREE WEBSITE TOOL

Back to Top Button Builder

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

✓

No account

✓

Customizable design

✓

No dependencies

01Customize your button
02Preview the design
03Copy the finished code

Button settings

Appearance

BackgroundBackground on hoverArrowArrow on hoverBorderBorder on hover

Background opacity50%Hover background opacity75%Border width0pxCorner roundness50%Arrow styleShadowBackground blur

Position & behavior

Side of screenShow after scrolling400px

Desktop & tablet

Button size50pxSide offset20pxBottom offset20px

Mobile

Button size45pxSide offset10pxBottom offset10px

Your ready-to-use code

One HTML Embed for Carrd or another website

<!-- Back to Top button by CarrdTemplates.com -->
<style>
button.ct-backtop-1lt7saz{appearance:none!important;-webkit-appearance:none!important;box-sizing:border-box!important;position:fixed!important;right:20px!important;left:auto!important;bottom:20px!important;top:auto!important;z-index:2147483000!important;display:flex!important;align-items:center!important;justify-content:center!important;width:50px!important;height:50px!important;min-width:0!important;min-height:0!important;margin:0!important;padding:0!important;border:0px solid #FFFFFF!important;border-radius:50%!important;background:rgba(255,255,255,0.5)!important;color:#1A1A1A!important;box-shadow:0 4px 12px rgba(0,0,0,.18)!important;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);cursor:pointer!important;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(8px);transition:opacity .25s ease,visibility .25s ease,transform .25s ease,background-color .2s ease,border-color .2s ease,color .2s ease}
button.ct-backtop-1lt7saz.ct-backtop-visible{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}
button.ct-backtop-1lt7saz svg{display:block!important;width:48%!important;height:48%!important;margin:0!important;fill:none!important;stroke:currentColor!important;stroke-width:2!important;stroke-linecap:round!important;stroke-linejoin:round!important;transition:stroke .3s ease,transform .3s ease}
@media(hover:hover){button.ct-backtop-1lt7saz:hover{background:rgba(255,255,255,0.75)!important;color:#FFC107!important;border-color:#FFFFFF!important;transform:translateY(-3px)}button.ct-backtop-1lt7saz:hover svg{transform:translateY(-2px)}}
button.ct-backtop-1lt7saz:focus-visible{outline:3px solid #2EA0FF!important;outline-offset:3px!important}
@media(max-width:600px){button.ct-backtop-1lt7saz{width:45px!important;height:45px!important;right:10px!important;bottom:10px!important}}
@media(prefers-reduced-motion:reduce){button.ct-backtop-1lt7saz{transition:none!important}button.ct-backtop-1lt7saz:hover{transform:none!important}button.ct-backtop-1lt7saz svg{transition:none!important;transform:none!important}}
</style>
<button type="button" class="ct-backtop-1lt7saz" aria-label="Back to top" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 19V5M5 12l7-7 7 7"/></svg></button>
<script>
(function(){
  var script=document.currentScript, button=script&&script.previousElementSibling;
  if(!button||button.dataset.ctBacktopReady)return;
  button.dataset.ctBacktopReady='true';
  function update(){var visible=(window.scrollY||document.documentElement.scrollTop||0)>=400;button.classList.toggle('ct-backtop-visible',visible);button.tabIndex=visible?0:-1;}
  button.addEventListener('click',function(){var reduce=window.matchMedia&&window.matchMedia('(prefers-reduced-motion: reduce)').matches;window.scrollTo({top:0,behavior:reduce?'instant':'smooth'});});
  window.addEventListener('scroll',update,{passive:true});window.addEventListener('pageshow',update);update();
})();
</script>

In Carrd, add an Embed element. Set Type to Code, Style to Hidden, and Location to Body End. Paste the complete code, then publish and test. Requires Carrd Pro Standard or higher.

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

CARRD TEMPLATES

CARRD TEMPLATES

Back to Top Button Builder

Button settings

Appearance

Position & behavior

Desktop & tablet

Mobile

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 1498+ customers.

CARRD TEMPLATES

Website templates for businesses, built with Carrd.

Tools

Journal

How it works

Contact

© 2026 Carrd Templates

Trusted by 1498+ customers.

CARRD TEMPLATES

Website templates for businesses, built with Carrd.

Tools

Journal

How it works

Contact

© 2026 Carrd Templates

Trusted by 1498+ customers.