SEOlust logo SEOlust
CSS & Design Generators

CSS Ribbon Generator

Create corner ribbons for cards — a diagonal "New" / "Sale" banner in any corner with custom text and colors, plus copy-ready HTML + CSS. Free.

All tools
NEW

💡 How to use

  • A corner ribbon is a diagonal banner across a card corner — great for "New", "Sale", or "Featured".
  • The parent card needs position: relative and overflow: hidden.
  • Copy the HTML and CSS, then place the ribbon inside any card.

Free CSS Ribbon Generator

Create corner ribbons with CSS and copy the code in one click. Add a diagonal banner like 'New', 'Sale', or 'Featured' to any card — choose the corner, text, and colors with a live preview, then paste ready-to-use HTML and CSS. Free, no sign-up, runs in your browser.

What is a CSS ribbon?

A corner ribbon is a diagonal banner that sits across the corner of a card or box, used to draw attention to a label such as 'New', 'Sale', 'Featured', or 'Popular'. It is a purely decorative CSS effect — a rotated element clipped to the card's corner — so it needs no images and stays sharp at any size. This generator builds one and lets you place it in any of the four corners.

How to use the ribbon generator

It is instant:

  • Type the ribbon text (keep it short — a word or two).
  • Choose which corner it sits in.
  • Set the ribbon and text colors.
  • Copy the HTML and CSS and drop the ribbon into any card.

How the corner ribbon works

The ribbon is a wide, absolutely-positioned banner rotated 45 degrees and pushed into the corner of its container. The container needs position: relative so the ribbon anchors to it, and overflow: hidden so the ends of the diagonal banner are clipped neatly at the card edges instead of sticking out. The result is a clean triangle-corner label built entirely from CSS.

Placing the ribbon correctly

The two rules that make it work live on the card, not the ribbon: position: relative and overflow: hidden. Without relative positioning, the ribbon escapes to the page corner; without overflow hidden, its ends spill past the card. The generated CSS puts these on a wrapper class, so make sure your card uses that wrapper. Give the card a border-radius and the ribbon corners are trimmed to match automatically.

Using ribbons effectively

Ribbons are attention-grabbers, so use them sparingly — one per card, reserved for genuinely useful labels like a sale badge or a 'new' tag. Match the ribbon color to its meaning (a warm color for sales, your accent for 'new') and keep the text short so it fits the banner. Overusing ribbons dilutes their impact and clutters a grid of cards, so let them highlight the exceptions rather than the rule.

Pro tip

Keep ribbon labels to one or two uppercase words for maximum legibility on the narrow banner, and store the ribbon color as a CSS variable so a whole set of cards stays consistent. If you need a softer badge instead of a corner ribbon, a small pill using our CSS Button or Pattern generators can work well too.

FAQ

Is this CSS Ribbon Generator free?
Yes. It is completely free, runs in your browser, and requires no account or sign-up.
How do I add a corner ribbon to a card?
Give the card position: relative and overflow: hidden, then place the ribbon element inside it. The generator provides the wrapper class and ribbon markup ready to paste.
Why is my ribbon sticking out of the card?
The card needs overflow: hidden so the diagonal banner's ends are clipped at the edges, and position: relative so the ribbon anchors to the card. Both are in the generated CSS.
Can I put the ribbon in any corner?
Yes. Choose top-right, top-left, bottom-right, or bottom-left, and the generator adjusts the position and rotation accordingly.
Does the ribbon use an image?
No. It is pure CSS — a rotated, positioned element — so it stays crisp at any size and adds no image request.
How long can the ribbon text be?
Keep it short, ideally one or two words like NEW or SALE. Longer text may not fit neatly on the diagonal banner.
Does it work in all browsers?
Yes. It uses positioning and transforms supported in every modern browser.

Related tools

Pro tip: pair this tool with CSS Box-Shadow Generator and CSS Flexbox Generator for a faster SEO workflow.

  • CSS Box-Shadow Generator — Design CSS box-shadows visually with live preview — control offset, blur, spread, opacity, color, and inset, …
  • CSS Flexbox Generator — Build flexbox layouts visually — set direction, justify, align, wrap, and gap with a live preview, then copy …
  • CSS Loader & Spinner Generator — Create pure-CSS loading spinners and animations — spinner, dual-ring, pulse, and dots styles with adjustable …
  • CSS Text-Shadow Generator — Add shadows and glow effects to text visually — adjust offset, blur, opacity, and color with a live preview a…
  • CSS Gradient Generator — Create CSS gradients visually and copy the code in one click — linear, radial, and conic gradients with unlim…