Content

    Each logo needs an image address that starts with https://. In Squarespace you can copy an image address from your media library, or you can use any image that is already hosted online. PNG, JPG, WebP, GIF and SVG all work. Up to 24 logos.

    Motion

    20 s

    Speed is how long your whole list takes to scroll past once, so a longer list moves faster on screen. Lower numbers are faster.

    48 px

    When a visitor's device is set to reduce motion, the marquee stops and the items sit in a static, centred row instead.

    Style

    40 px

    140 px

    Every logo sits in a box of this size and is scaled to fit without stretching, so the layout never jumps while images load.

    80%

    Items return to full opacity on hover. Lower opacity reduces text contrast.

    Used only when the marquee background is transparent: it picks a readable colour for the credit link and sets the preview backdrop. Ignored if you choose a solid background.

    80 px

    The fade uses a CSS mask, so it works on any background. Very old browsers without mask support get a fade in your page's background colour instead.

    Options

    A small, visible "Widget by …" link. Thanks for keeping it, you can turn it off.

    Live preview

    Your code

    


    How to add it
    1. Squarespace: edit the page, add a Code Block where you want the marquee, switch off "Display Source" if it is on, then paste the code. Code Blocks depend on your plan, so check yours.
    2. Any other site: paste it into an HTML or custom code block at the spot where it should appear.
    3. Test it once on the live page. The Squarespace editor can show a code block differently from the published page.
    4. The snippet is self-contained: pure CSS animation, no JavaScript and no external requests. Your logo images load from the addresses you entered.
    Runs in your browser. Nothing you enter is uploaded or stored.
    How it works
    Four steps. No plugin.
    01
    Add your items
    Logos from image links you host, or short pieces of text.
    3 minutes
    02
    Style it
    Speed, direction, spacing, logo height, grayscale and the edge fade.
    2 minutes
    03
    Copy the snippet
    One block of HTML and CSS, with no JavaScript.
    10 seconds
    04
    Paste it into a Code Block
    Edit the page, add a Code Block, switch off Display Source and paste it in. Code Blocks need a plan that includes them, so check yours.
    2 minutes
    Questions
    Questions about the marquee.
    Straight answers about this tool. If yours isn't here, ask me directly.
    Average response·< 1 business day
    Where do I get image links for my logos?
    Use any image address you host. In Squarespace you can upload to your media library and copy the image address. The tool does not upload files.
    Can I show any logo?
    Only logos you have permission to show. A client or publication logo can imply an endorsement, so use ones you are allowed to use.
    Does it need JavaScript?
    No. It is a CSS animation, so it is light and works in a Code Block.
    What about reduced motion?
    For visitors who ask their device to reduce motion, the strip stops and the items wrap into a still row.
    Why add alt text?
    Alt text lets screen readers describe each logo and helps if an image fails to load.
    What is the credit link?
    A small, visible link under the strip that points back to this site. It is on by default and you can switch it off. It is marked nofollow.
    The hosting I use
    I host my own sites on Hostinger.
    In my experience it's one of the best hosting options for small business websites, and it's the one I suggest. If you sign up through my link, I earn a small commission at no extra cost to you.
    Check Hostinger plansAffiliate link
    Free tools, plus a free website audit
    Want help with the rest of your website?
    These tools are free to use. If your site needs more than a marquee, I design and build custom websites for small businesses, and I offer a free audit that shows you what to fix first.