OneTaskBy Tim King · Updated
Client Logo Wall Generator
Customer Logo Grid in HTML and CSS
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Client Logo Wall works
A client logo wall is a grid of the companies that already use your product or service, usually under a line such as "Trusted by teams at". Enter the client names, pick the columns and cell style, and copy the HTML and CSS. Swap each name for the real logo image when you have it.
Recognisable names are some of the quickest social proof a page can show. A still grid lets visitors take in every logo at a glance, where a scrolling marquee shows only a few at a time.
How the client logo wall is laid out
The logos sit in a list inside a CSS grid with a fixed number of equal columns, and each cell centres its logo in a box at least 4rem tall so logos of different shapes line up. Below 40rem wide the grid drops to two columns so logos stay a readable size on phones.
Greyscale logos
Each logo starts in greyscale at reduced opacity so a wall of brand colours does not fight with
your own design, then shows in full colour on hover. The same rule covers text wordmarks and
<img> logos, so the effect keeps working after you swap in real images.
FAQ
How do I use real logo images?
Replace each <span class="logowall-mark"> with <img src="logo.svg" alt="Company name">. Use SVG
logos where you can so they stay sharp, and keep the alt text to the company name.
Do I need permission to show client logos?
Usually yes. Many contracts limit how a customer's brand can be used, so check with each client or their agreement before listing them. Some companies publish brand rules for exactly this.
Why are the logos grey?
Greyscale makes different brands look like one set and keeps attention on your page. If you would
rather show full colour, delete the filter and opacity lines from the CSS.
How is this different from a logo scroller?
A logo scroller moves logos sideways in an endless strip and suits a long list in little space. The client logo wall shows every logo at once in a still grid, which is easier to scan.
See also: all UI Components tools, Layout & Spacing, Shadows & Motion, Shapes & SVG, Forms & Inputs, Colour.
Related tools
Logo Scroller
Build a seamless infinite logo marquee in pure CSS.
Testimonial Grid
Build a masonry wall of testimonials with avatars and stars.
Feature Grid Builder
Responsive icon-title-description feature grids for landing pages.
Hero Section Builder
Landing page hero sections with fluid headline and buttons.
Trust Badge Strip
Build a row of trust badges with inline SVG icons.