This CSS ribbon generator writes the code for a diagonal corner ribbon or a folded side banner, using pure CSS with no images. Set the text, style, side, size and colors, check the live preview on a sample card and copy the HTML and CSS for product cards and pricing tables.
-
Runs entirely in your browser — nothing is uploaded. If you leave a size blank, the generator uses a 30 px band, a 160 px corner length, a 40 px offset and an 8 px fold.
How the CSS Ribbon Generator Works
A corner ribbon is a strip rotated 45 degrees and pushed partly outside a card that has overflow: hidden, so the ends are trimmed at the edges. The CSS ribbon generator places the strip’s center on the corner’s diagonal, at the offset you choose. A folded banner instead sticks out past the card edge and uses a small, darker border triangle to fake the fold.
Formula: for a corner ribbon of length L, band height H and offset D, top = D − H ÷ 2 and the side value = D − L ÷ 2, with rotate(45deg) on the right or rotate(−45deg) on the left. To cross both edges completely, L must be at least 2 × √2 × D + H. For a folded banner, the side value is −F, and the fold is an F × F border triangle whose color is each RGB channel of the background × 0.65, rounded.
- Ribbon text — a short label such as Sale or New, shown in capitals.
- Style and Side — diagonal corner or folded banner, on the right or left.
- Band height — the thickness of the strip in pixels. If you leave it blank, the generator uses 30 px.
- Ribbon length (corner) — the length of the rotated strip before trimming; a blank field uses 160 px.
- Offset — for corners, the distance from the corner to the strip’s center; for folded banners, the distance from the top. A blank field uses 40 px.
- Fold size (folded) — the overhang past the edge, which is also the fold size; a blank field uses 8 px.
- Background and Text color — the ribbon colors; the fold shade comes from the background.
Example Scenarios
| Settings (input) | Key rules (output) | Check |
|---|---|---|
| Corner, right, L 160, H 30, offset 40, #c0392b | top: 25px; right: -40px; rotate(45deg) | Needs 143.1 px, length OK |
| Corner, left, L 200, H 34, offset 50 | top: 33px; left: -50px; rotate(-45deg) | Needs 175.4 px, length OK |
| Folded, left, H 32, offset 16, fold 8, #c0392b | top: 16px; left: -8px; border-width: 0 8px 8px 0 | Fold color #7d251c |
| Folded, right, H 28, offset 20, fold 10, #1f5c3d | top: 20px; right: -10px; border-width: 0 0 10px 10px | Fold color #143c28 |
| Corner, right, L 120, H 30, offset 40 | top: 25px; right: -20px; rotate(45deg) | Warning: needs 143.1 px |
CSS Corner Ribbon Tips for Cards and Badges
Small details decide whether a ribbon looks crisp or clumsy.
- Keep the text to one short word or two. A 160 px strip with a 40 px offset shows only about 113 px along its center line, and less near the edges.
- The card must have position: relative. Corner ribbons also need overflow: hidden on the card, while a folded ribbon banner CSS layout needs the overflow visible, or the fold is cut off.
- Use a darker fold shade rather than black. The 0.65 factor here keeps the hue, so a red ribbon gets a deep red fold.
- As a css sale badge generator, pair a high-contrast color with the word Sale or a percentage, and keep the ribbon clear of the product photo.
- Rotated text can look soft on some screens; whole-number offsets and heights help.
Folded ribbon CSS relies on the same border-triangle trick used for tooltips, so it works in every current browser. To change the angle, edit the rotate value in the code from the CSS ribbon generator. For how rotation and other transforms work, see MDN’s reference for the CSS transform property.
CSS Ribbon Generator FAQ
How do I make a corner ribbon with CSS?
Give the card position: relative and overflow: hidden. Add a ribbon element with position: absolute, a fixed width and height, transform: rotate(45deg), and top and right values that put its center on the corner diagonal. The card trims the ends, leaving a clean band.Is the CSS ribbon generator free to use?
Yes. It is free with no account, runs entirely in your browser and uploads nothing. The output is plain HTML and CSS with no framework or images, so you can paste it into a theme, a component or a static page and use it commercially.Why is my corner ribbon cut off or showing gaps?
Gaps at the ends mean the strip is too short for its offset. The tool shows the minimum length, 2 × √2 × offset + height, and warns when you are below it. If the ribbon is hidden entirely, the parent probably lacks position: relative.How do I put the ribbon on the left corner?
Switch Side to Left. For a corner ribbon the code swaps right for left and uses rotate(-45deg), so the strip runs the other way. For a folded banner, the overhang and fold triangle move to the left edge with mirrored borders.Can I animate the ribbon?
Yes. Add a transition to the ribbon and change its transform or background when the card is hovered, for example a slight scale. Keep it subtle, and wrap the effect in a prefers-reduced-motion media query so people who prefer less motion do not see it.Can I download the ribbon as an image?
The tool gives code, not a picture, because CSS ribbons stay sharp at any zoom level and are easy to edit. Download .html saves the snippet as a file. If you need an image, open that file in a browser and take a screenshot.Related Tools
Pick exact brand colors with the hex to RGB color converter, check the diagonal geometry with the triangle calculator, and work out the number for a sale label with the discount calculator before adding it with the CSS ribbon generator.