Click any text to edit it · drag a photo to reposition it, scroll to zoom, click to replace
Discount Badge — Free Promo & Sales Social Post Template
Promo & Sales · v1.0.0 · Updated 2026-10-16 · Instagram, Facebook & X · HTML + CSS
What's included
Features
About this template
Discount Badge — Free Sale and Coupon Post Template
Discount Badge is a free sale post template built around a big circular "% off" badge. Under the badge sit the offer headline, a dashed promo-code chip that looks like a coupon, and the end date that adds urgency.
A badge that stops the scroll
The badge is a solid accent circle tilted at -8 degrees, with a white "50%" in Poppins 900 and "OFF" spaced out underneath. A double ring, made with two CSS box-shadows (one in the background colour, one in the accent), gives it a sticker look without any image.
Coupon-style promo code
The promo code sits in a white chip with a dashed accent border, which people recognise as a coupon. The end-date line underneath ("Ends Sunday at midnight") adds a deadline, one of the most effective ways to lift sale conversions.
Adapts to every size
On portrait, square and Story sizes the badge sits above the centred copy. On the 16:9 landscape size for X the layout switches to a row, with a larger badge on the left and left-aligned copy on the right. Long offer headlines shrink to fit.
Edit for any offer
Use it for percentages ("30%"), fixed amounts ("$20") or words ("BOGO"). Change "OFF" to "SAVE" or "FREE", and the code chip to "No code needed".
Running Black Friday or Cyber Monday? The dedicated Black Friday Sale template uses bolder condensed type. Featuring one product? See Product Spotlight.
Why use it
Why Use the Discount Badge Template
How it’s different
How It’s Different From Canva-Style Templates
Step by step
How to Use
- 1Pick the sizeChoose Portrait 4:5 (the Instagram feed default), Square, Story / Reel or Landscape 16:9 for X. Discount Badge opens at 1080×1350.
- 2Edit the textClick any text in the preview, or use the fields on the left (discount, badge word, offer, promo code and more). Wrap words in *asterisks* to colour them.
- 3Match your brandApply one of 12 palettes or set exact colours with the pickers, then choose heading and body fonts.
- 4Download or take the codeDownload a PNG or JPEG at full size, download every size as a ZIP, copy the HTML, or fork it into My Code to keep editing.
Real-world uses
Common Use Cases
Got questions?
Frequently Asked Questions
Open Discount Badge, set the discount (for example 50%), write the offer, add your promo code and end date, choose colours, and download the 1080×1350 portrait or 1080×1920 Story image.
Yes. The discount field is free text, so "$20", "2 for 1" or "BOGO" all work. Change the badge word to match.
Change the code chip to "No code needed" or "Auto-applied at checkout", or clear it and the chip disappears.
Yes. The Black Friday Sale template is designed for Black Friday and Cyber Monday, with condensed type on black.
Portrait post 1080×1350 (4:5): Instagram feed (recommended), Facebook feed, X portrait. Square post 1080×1080 (1:1): Instagram, Facebook and X feeds. Story / Reel 1080×1920 (9:16): Instagram and Facebook Stories, Reel covers. Landscape post 1600×900 (16:9): X feed image, Facebook landscape. Switch sizes in the editor and the layout adapts, or click "All sizes (ZIP)" to download every size at once.
Yes. "Copy HTML" and "Download .html" give you one self-contained file: the markup, all the CSS and links to the Google Fonts it uses. "Fork to My Code" saves an editable copy in the UI Snippets editor. The file records the template name and version (v1.0.0).
Yes. It is free for personal and commercial posts, with no sign-up and no watermark. Everything runs in your browser and nothing you type or upload is sent to a server.