About the CSS Ribbon Generator
What is a CSS ribbon?
A ribbon is the small band that flags a card as new, discounted, featured or sold out. In CSS it's an absolutely positioned element sitting over the card, sometimes rotated, sometimes with a folded tail drawn as a pseudo-element. None of it is complicated on its own. What makes it fiddly is that the ribbon and the card have to cooperate, and the rules that matter live on the card rather than the ribbon.
That's the part this tool gets right. A diagonal corner ribbon only works if the card is position: relative with overflow: hidden, so the ends of the band are trimmed by the corner. Forget either and the ribbon floats off into the page. The generated CSS includes the card rule alongside the ribbon rule, and the preview is a real card so you can see it being clipped rather than guessing.
Four kinds are covered. The diagonal corner band, the folded banner with a small tail behind the card, a pill tag for something quieter, and a full width strip. The strip is the one to reach for when the label has to be read easily, since nothing about it is rotated.
How to Use This Tool
- Pick a kind. Corner for the classic sale flash, folded for a banner that looks like it wraps around the card, tag for something subtle, strip for maximum legibility.
- Choose a corner. Top right is what people expect. Bottom corners read as a status rather than a promotion.
- Write the label. One or two words. A diagonal band runs out of room fast, and a long label at an angle is hard to read.
- Set the colors. Strong contrast against the card matters more here than anywhere, because the text is small and often tilted.
- Copy both boxes. The CSS includes the rules the card needs. The HTML shows where the ribbon div goes inside it.
Common Use Cases
Ribbons are shorthand. They say one thing about an item without taking any of its space.
- Product cards: sale, new in, last one, the shorthand shoppers scan for before reading anything else.
- Pricing tables: a most popular ribbon on the middle plan, which is the single most common use of a corner ribbon anywhere.
- Course and event listings: starts soon, full, or a level indicator.
- Documentation: a beta or deprecated tag on a component card, where a quiet pill suits better than a red band.
- Portfolio grids: an award or client name across a corner of a case study thumbnail.
Building the card itself? The CSS Box Shadow Generator lifts it off the page, the CSS Border Radius Generator shapes the corners the ribbon gets clipped by, and the CSS Triangle Generator covers the folded tail on its own. Or browse all our free developer tools.
Frequently Asked Questions
Why does my ribbon stick out past the card?
The card is missing overflow: hidden. A diagonal ribbon is deliberately wider than the corner it crosses, and the card is what trims the ends. That rule is in the generated CSS for the corner and strip styles. The folded and tag styles are meant to sit outside the card, so those two leave overflow alone on purpose.
Why is the ribbon positioned relative to the page?
Because the card isn't a containing block yet. An absolutely positioned element looks up the tree for the nearest ancestor with a position other than static, and if it doesn't find one it uses the page. Adding position: relative to the card fixes it, which is the other rule in the output.
Is a ribbon readable for screen readers?
The text in it is read like any other text, which is usually right. The thing to watch is the reading order, since a ribbon that appears at the top left visually may sit last in the markup. Put the ribbon element early inside the card if the label is important, and remember that a rotation changes nothing about what gets announced.
Will the corner ribbon work on a rounded card?
Yes, and it looks better for it. overflow: hidden clips to the border radius, so the band is trimmed along the curve rather than a square corner. Very large radii on a small card can eat the ends of a ribbon though, so check the label still fits.
How do I stop the text getting clipped?
Either shorten it or widen the band. A rotated ribbon is a fixed width strip, so a long label overflows rather than wrapping. The reach slider makes the band longer, and dropping the font size a point or two buys more room. If the label genuinely needs several words, the full width strip is the better choice.
Can I animate a ribbon?
You can, and a small scale or shift on hover works nicely for a card that's already interactive. Keep it to transform, since the ribbon is already rotated and adding to an existing transform is cheap. Sliding it in on page load is worth wrapping in a reduced motion check.
Should I use one image instead?
Almost never now. A CSS ribbon recolors with a variable, scales with the text, stays sharp at any density, and adds no request. An image only wins when the ribbon is genuinely illustrative, with texture or a drawn fold, which is a different thing from the flat bands here.
