Introducing Quickbanner – a banner creation tool that we used to design the banners in the headers of our posts

Every blog needs featured images. Every social post looks better with a custom graphic. And every engineer knows the feeling: you need a banner now, but firing up Figma feels like overkill, Canva is behind a login, and asking design for a „quick one” makes you feel guilty.

So I built something that shouldn’t work — but does.

Quickbanner is a single HTML file. Drop it anywhere static (GitHub Pages, Netlify, S3, a USB stick — honestly wherever). Open it. Type a headline. Pick a gradient theme. Click download.

Or skip the UI entirely: bake everything into the URL and get the PNG directly.

https://lokkery.github.io/quickbanner/index.html?text=We+Open-Sourced+Quickbanner&theme=ocean&w=1200&h=630&raw=1

That link produces this image. No running processes. No headless browsers. No „loading…” spinners. Just the browser’s canvas API doing exactly what it was built for.

Why build this?

If you’ve read anything about Lokkery, you know we care about developer environments — staging, QA, shared servers, the messy reality of teams shipping software together without stepping on each other’s toes.

But this tool has nothing to do with that. Or maybe it has everything to do with it.

Quickbanner started as a tiny internal script. We needed consistent featured images for the Lokkery blog. Every article had the same layout: headline, brand mark in the corner, a gradient that matched the vibe. Doing that manually in a design tool was fine for the first three posts. By post twelve, it was friction.

So I hardcoded our blog’s dimensions into an HTML file, added a few gradient options, and called it a day. Then I added font controls. Then padding sliders. Then query parameters. Then &raw=1. Then a dropdown with all the social media presets.

At some point I realised: this isn’t a script anymore. It’s a tool. And other people might want it.

So we cleaned it up, added 32 gradient themes, 14 Google Fonts, resolution presets for every major platform, and put an MIT license on it.

What Quickbanner actually does

Under the hood, it’s embarrassingly simple. That’s the point.

Feature	How it works
32 gradient themes	CSS gradients drawn to canvas
14 Google Fonts + 2 system fonts	Loaded on demand, then rendered to canvas with proper fallbacks
Custom dimensions	Set any width/height, or pick LinkedIn / Twitter / OG / 2K presets
Auto‑fit or manual font size	Sliders for both headline and brand text, or let the tool wrap and scale automatically
Padding controls	Horizontal and vertical independently — because sometimes the text needs to breathe
Shareable URLs	Every slider, every font choice, every theme — encoded as query params
Raw image mode	`&raw=1` hides the UI, serves only the canvas — embed it like `<img src="...?raw=1">`
One‑click PNG download	Filename includes resolution — `banner-1200x630.png`

Everything happens in your browser. Zero data leaves your machine. No API keys. No rate limits. No „your image has been deleted after 24 hours”.

Who is this for?

Bloggers who need consistent featured images without learning design software
Developers who want to generate OG images without spinning up a headless browser or paying for a screenshot service
Open source maintainers who want nice social previews for their GitHub repos
Marketing people who share URLs on LinkedIn/Twitter and want every link to have a custom image

Try it right now

No installation. No signup. No „request access.”

Option 1 – Hosted version (easiest)
👉 https://lokkery.github.io/quickbanner/

Just open the link. Type a headline. Click download. That’s it.

Option 2 – Self‑host (for the control freaks)

Go to github.com/lokkery/quickbanner
Download index.html (or clone the repo)
Double‑click to open in your browser — or upload to any static host (Netlify, Vercel, Cloudflare Pages, S3…)

One more thing

We built Quickbanner because we believe small tools should exist. Not every problem needs a SaaS, a subscription, or a venture‑backed startup. Sometimes the right answer is an HTML file with 32 gradients and a canvas tag.

That’s the same philosophy behind Lokkery.

Lokkery solves a different problem — booking shared development environments so your team stops stepping on each other in staging — but the DNA is the same: remove friction, keep it simple, and let engineers ship.

If Quickbanner saves you five minutes today, great. If it saves you an hour next week, even better. And if your team shares staging servers and you’re tired of „who’s using dev?” threads — maybe give Lokkery a look while you’re here.

Ship banners. Not complexity.

— The Lokkery team

P.S. Quickbanner is MIT licensed. Fork it. Break it. Add your own gradients. Build the weirdest banner generator the world has ever seen. Just share what you make.

🔗 Links: