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.
Extend with AI
Take This Post Further With AI
Ask an AI assistant to write offer headlines for different audiences, create a week of sale countdown posts, or convert this template into a component for your store's marketing pages.
Prompt to recreate it
Copy this into your AI assistant of choice to build the effect from scratch, or as a jumping-off point for your own variant:
Build a 1080×1350 discount sale post in HTML and CSS.
- Light pink background with a soft radial accent glow behind a large circular badge.
- Badge: a solid accent circle tilted -8deg with "50%" (Poppins 900) and a spaced "OFF" below, plus a double ring from two box-shadows.
- Below it, centred: the offer headline, a white promo-code chip with a dashed accent border, and a small end-date line.
- At 1600×900, switch to a row layout with a larger badge on the left.
- Use --u (1% of the shorter side) for sizing.Want to tighten it up first? Run this prompt through the AI Prompt Studio to score it across 8 quality dimensions, catch anti-patterns, and tune the wording for Claude, ChatGPT, or Gemini before you paste it in.
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, Landscape 16:9 for X, a 1200×627 LinkedIn image or a 1000×1500 Pinterest pin. 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.
- 3Add your imagesClick a photo area in the preview or use Images to upload your logo. Images stay in your browser.
- 4Match your brandApply your saved brand kit or one of 12 palettes, set exact colours, and choose heading and body fonts from any Google Font or your own uploaded font.
- 5Preview it in the feedSwitch the preview to Instagram, Story, X or LinkedIn to see the post with your name, handle and caption, and fix anything the quality checks flag.
- 6Download, save or bulk createDownload PNG, JPG or PDF, every size as a ZIP, or copy the HTML. Save it to My designs to reuse later, or turn a CSV into dozens of posts with Bulk create.
Real-world uses
Common Use Cases
Follow it up
Email Templates to Match the Discount Badge Post
Reach the people who are not on social media with a matching email from the free responsive HTML email templates: Black Friday Sale Email, Last Chance Sale Email, Abandoned Cart Email. Both libraries use the same brand colours and fonts, so the post and the email look like one campaign.
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 and LinkedIn feeds, X portrait. Square post 1080×1080 (1:1): Instagram, Facebook, LinkedIn 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. LinkedIn image 1200×627 (1.91:1): LinkedIn shared image and link posts, Facebook link images. Pinterest pin 1000×1500 (2:3): Pinterest standard pin (the recommended 2:3 ratio). Switch sizes in the editor and the layout adapts, or click "All sizes (ZIP)" to download every size at once.
Press Play in the editor to watch the animation for free. Downloading it as an animated MP4 (or WebM) for Reels, Stories and WhatsApp Status is for Patreon supporters, who enter the supporter passcode once. PNG, JPG, PDF and HTML exports are free.
Yes, for Patreon supporters. Choose Export, then "Bulk create from CSV", and paste rows from a spreadsheet or upload a CSV whose column names match the Discount Badge fields. Every row becomes one post, and you download them all as a ZIP.
Yes. The preview switches between the plain design and mock-ups of an Instagram feed post, an Instagram Story, an X post and a LinkedIn post, using the name, handle and logo from your brand kit and the caption you type.
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.