CSS Ribbon Generator
Generate a folded corner-ribbon banner — a diagonal 'Sale!'/'New'/'Featured' label draped across a card's corner, with an optional folded-edge shadow — as ready-to-paste CSS, with a live preview.
Input
The label shown on the ribbon banner.
Which corner of the card the ribbon is draped across.
Scales the whole ribbon — band width, font size and offsets all follow.
Adds a darker ::before/::after triangle pair where the ribbon folds under.
Output
Your ribbon will appear here.
Inline-styled twin of the preview above (fold-shadow triangles inlined, not ::before/::after) — paste anywhere.
Guides
A corner ribbon is the diagonal "Sale!" or "New" label draped across the corner of a product card, image, or pricing tile. It looks like a strip of paper folded around the box's edge — that fold is the hard part to get right in plain CSS. This generator writes the whole thing for you: pick a corner, a color and a size, and copy the finished rule.
How to use it
- Type the ribbon text — short labels ("Sale!", "New", "-20%") read best.
- Pick the corner the ribbon is draped across.
- Set the ribbon color and text color.
- Drag ribbon size until the band looks right in the preview — everything else (font size, line height, offsets) scales with it.
- Toggle the folded-edge shadow on for the small darker triangles that make the ribbon read as folded paper rather than a flat rotated box.
- Copy the CSS and the HTML
<div class="ribbon"><span>…</span></div>snippet, or copy/download the preview's inline-styled HTML if you want something that doesn't depend on a separate stylesheet.
How it works
The ribbon is two elements: a small square .ribbon wrapper pinned to the corner with overflow: hidden, and a wider .ribbon span rotated 45° inside it. Only the diagonal slice of the span that falls inside the wrapper's clipped window is visible, which is what gives the band its clean square-cornered look instead of overflowing the card. The folded-edge shadow adds a ::before/::after pair on the span — two small triangles, colored a darker shade of the ribbon color, positioned just past the span's own edge — that get rotated along with everything else and read as the paper folding back on itself at the two points where the band exits the visible square.
Privacy
Everything runs in your browser — the CSS and HTML are generated locally, nothing is uploaded, and the tool works offline once the page has loaded.
Why are there two HTML snippets?
The HTML field is the real markup, meant to pair with the CSS block via the .ribbon/.ribbon span class selectors — that's what you paste into your project. The preview snippet is a separate, fully inline-styled copy of the same ribbon (fold-shadow triangles included as plain <div>s instead of ::before/::after) that matches exactly what you see above — handy if you want to drop it somewhere without shipping a separate stylesheet, but the class-based version is the one to use in a real page.
What if I need a different shape, not a ribbon?
For a plain triangle (an arrow, a tooltip pointer), use the CSS Triangle Generator. For a shape with more points — a star, a hexagon, a speech-bubble outline — the CSS Clip-Path Generator builds arbitrary polygons instead. To put a drop shadow under a card the ribbon sits on, see the CSS Box Shadow Generator.
Use it from code
From 3 credits per callREST API
curl -X POST https://api.iotools.cloud/v1/tool/css-ribbon-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"ribbonText": "Sale!",
"corner": "top-right",
"ribbonColor": "#e63946",
"textColor": "#ffffff",
"ribbonSize": "140",
"foldShadow": "true"
}'Swap in your own key from your account. The tool's fields are the body — no wrapper.
Ask an AI agent
Use the IOTools `css-ribbon-generator` tool (CSS Ribbon Generator) on this input:
YOUR_INPUT_HEREPaste this at any agent connected to the IOTools MCP server, then add your input.