Brand mockup: see your brand in its gradient before you commit

A brand mockup is a preview of your brand on the places it will actually appear: the app icon, the X header, the podcast cover, the docs page, the pitch deck and the website. It lets you judge a logo, a name and a background together, at real sizes, before you spend money or months on them. The fastest free way is to type your brand's name into Try on your brand and look at every surface at once; the method below also works with any design tool.

Why digital brands need a brand mockup

A product brand is rarely seen big. Most people meet it as a 60 pixel icon on a phone, a circle next to a post, or a link card in a chat. A mark that looks striking at 2,000 pixels on an artboard can turn to mush at those sizes, and a background that flatters the logo can swallow the name. A mockup is where you catch that, cheaply.

It also shows the brand as a system. When the same ground sits behind the icon, the header, the cover and the deck, people recognise you before they read you. That is the whole point of brand consistency across platforms, and a mockup is the first place you can see whether you have it.

What to check in a brand mockup

Looking at a mockup and thinking "nice" is not a test. Go through the same four checks on every option, and write down what fails.

Small sizes come first

Start with the smallest surface, not the biggest. A wide wordmark will never fit a square icon, so plan a square symbol or an initial for those spots. Our guide to logo sizes lists where each version goes.

Contrast across the whole ground

A gradient has many colours, so the name can pass on one side and fail on the other. Check where the words actually land. WebAIM's contrast checker takes two hex codes and gives you the ratio in seconds.

How to make a free brand mockup with Try on your brand

Try on your brand is a free page on Gradiently. You do not need a card or an account, and the only thing it asks for is your brand's name. It puts that name, and your logo if you add one, across brand-use previews wearing a Mark: a living gradient or material background that has one owner at a time.

1. 1

   Type your brand's name

   Open /try and type it. It is the only thing the page needs.

2. 2

   Add your logo

   Drop in a PNG, JPG, SVG or WebP. It is read in your browser, and a plain background is taken out so the logo sits on the gradient. A transparent PNG looks best. Wide wordmarks use your initial in square spots like the app icon.

3. 3

   Or fill from your website

   Paste your address and it reads your site's name, line, icon and theme colour. You can undo it.

4. 4

   Add a tagline and what you make

   Pick SaaS, AI and apps, fintech, agency, design studio, creator and newsletter, podcast and music, courses or something else. It orders your previews and suggests gradients that fit.

5. 5

   Scroll the previews

   Your brand appears on an app icon and its small sizes, X, Instagram and LinkedIn profiles, a YouTube banner, a podcast cover, a newsletter, a deck, a sign-in screen, a website and its link preview, all wearing the same Mark.

Compare two or three grounds side by side

Judging one background at a time is how people end up picking the last one they saw. Shuffle through Marks (and step back if you skipped a good one), look at the suggested rail, or open the full library and search by colour or mood. Heart the ones that work to build a shortlist of up to 12.

Then press Compare. It puts two or three of your shortlist next to each other on the same previews, so the only thing that changes is the ground. Run the four checks on each and keep the one that passes them all. If you are torn, how to pick the right Mark has a tie-breaker.

Saving and sharing your brand mockup

• Email me my previews sends your brand wearing the gradients you chose to your inbox, so you can look again on a bigger screen. It is one email, not a newsletter.
• Share gives you a link that opens your brand in the same gradients, with its own preview card when you paste it into a chat. Shared brands are kept out of search results.
• Save my brand keeps your name, logo, kind of brand, site and shortlist, and carries them into your Brand Kit when you sign up, on a free account too.

When to claim a Mark

Trying a Mark on is free and anyone can do it. Claiming is a paid step that makes you its only owner: your name on its public record, a numbered certificate, and nobody else can design or export with it. Claim when the Mark has passed your checks on every surface and you are ready to use it in public, because until then someone else can claim it first. Press Make it mine to open the Mark's page; how to claim a Mark walks through the rest.

A brand mockup method that works in any tool

You can run the same test in Figma, Keynote or a plain browser. The trick is to fix the surfaces first and swap only the background.

1. 1

   Set up the frames

   Make one frame per surface at its real size: app icon 1024×1024, X header 1500×500, podcast cover 3000×3000, link preview 1200×630, slide 1920×1080. Exact sizes are in the app icon size guide and the X header size guide.

2. 2

   Place the same name and logo

   Same words, same logo file, same position rules in every frame.

3. 3

   Swap one background at a time

   Duplicate the whole set for each candidate. Never mix candidates inside one set.

4. 4

   Zoom out and shrink

   View the icon at 32 px and the full set at a quarter size. What survives is your answer.

5. 5

   Show someone for five seconds

   Ask what the brand is called and what colour it is. If they hesitate, the mockup failed.

<style>
  .ground { background: linear-gradient(135deg, #1f0b3a, #7c3aed 55%, #f472b6); color: #fff; font: 600 16px/1.2 system-ui; display: grid; place-items: center; }
  .row { display: flex; gap: 24px; align-items: end; }
</style>
<div class="row">
  <div class="ground" style="width:128px;height:128px;border-radius:28px">LL</div>
  <div class="ground" style="width:32px;height:32px;border-radius:7px;font-size:12px">LL</div>
  <div class="ground" style="width:16px;height:16px;border-radius:4px;font-size:7px">L</div>
  <div class="ground" style="width:450px;height:150px;font-size:28px">Lumen Labs</div>
</div>