Logo Marquee Widget

New

Make a scrolling strip of client, partner or press logos. Paste your logo image URLs, set the speed and look, and copy the code. The animation is pure HTML and CSS, so the widget needs no JavaScript and loads nothing from xorbin.com. It works in plain HTML, WordPress, Shopify, Webflow and any site builder that accepts custom HTML.

Embed code

Everything happens in your browser. The code is self-contained: it doesn't load anything from xorbin.com and doesn't track your visitors. The share link keeps your settings in the part of the address after #, which is never sent to a server.

How to add the logo marquee to your website

Open a sample logo under Logos and replace its image URL and company name. Add a link if you want one. Use the arrows to reorder logos, ✕ to remove one, and + Add logo for more.
Set the loop duration, direction, logo height and spacing. The preview updates as you go.
Click Copy code.
Paste it into your page as HTML, where the logos should appear.

WordPress: add a Custom HTML block and paste the code.
Shopify: add a Custom Liquid section in the theme editor.
Wix: use Embed code → Embed HTML.
Squarespace: add a Code block.
Webflow: drag in an Embed element.
Plain HTML: paste the code where the widget should appear.

To come back to your design later, click Copy share link and save the link. Opening it restores every setting. The sample brands are made up, so replace them before you publish.

Features

Seamless loop

The logo row is repeated so the strip scrolls forever with no jump or gap.

No JavaScript

The motion, the pause button and the hover pause are plain CSS, so the code is light and works even where scripts are blocked.

Clean look

Grayscale logos that turn to color on hover, faded edges, and your own height, spacing and speed.

Accessible

A Pause animation button lets visitors stop the motion. When someone tabs to a logo link, the strip stops and shows every logo in place. Visitors who turn on reduced motion in their system settings see a still row of logos.

Tips for good-looking logos

Partner strip: use transparent SVG or PNG logos, keep grayscale on and choose a longer loop duration for gentle motion.
Sponsor showcase: turn grayscale off, make the logos taller and link each one to the sponsor's site.
Dark section: use light versions of the logos and turn on the background color. The preview background only helps you test; it isn't part of the code.

Every logo has the same height, and its width follows the image. If some logos look smaller than others, trim the empty space around them in the image file. The duration is the time for one pass of the whole row, so a longer row of logos moves faster at the same duration.

Images and privacy

The builder runs in your browser and doesn't upload your files. The logo images load from the addresses you enter, both in the preview and on your website, so use images you host or have permission to show. Prefer HTTPS addresses: an HTTPS page blocks images from plain HTTP.

A share link holds your settings, including the logo addresses and links, so anyone who has it can read them. Don't put private or signed image URLs in a link you share.

Some site builders remove <style> tags, and some themes have styles that override the widget's. Check the result on your real page before you publish.

Frequently asked questions

Can I use my own logo files?

Yes. Upload them to your website, CMS media library or an image host, and paste each file's address. SVG and transparent PNG look best, but any image format browsers support works.

Can each logo link somewhere?

Yes. Add a link to any logo, for example a case study or the partner's website. In the exported code, links open in the same tab. In the preview they open in a new tab so you don't lose your settings.

Why is a logo missing?

A logo is shown only when it has both an image URL and a company name. In the list, a logo without one is marked "not shown". If the logo is listed but the image doesn't appear, open its address in a new tab: the file may have moved, or its host may block use on other sites.

How do I make it slower or faster?

Change Loop duration. It's the time one full pass takes, so a larger number means slower.

Does it work on mobile?

Yes. The strip fills the width it's given and scrolls the same way on phones. Use Mobile in the preview to check it.

Can I remove the Xorbin credit?

Yes. Turn off the credit link under Credit before you copy the code. It changes nothing else.

Countdown timer widget — Count down to a sale, launch or event on your website.
Analog clock widget — Add a classic clock face with hands to your website.
Digital clock widget — Add a seven-segment LED-style clock to your website.
Before and after image slider — Compare two photos with a draggable divider.
Star rating badge widget — Show your average rating and review count.
SVG to Base64 converter — Turn an SVG logo into a data URI you can paste as the image URL.
CSS gradient generator — Create a gradient background for the section around your logos.