CSS Ribbon Generator

A CSS ribbon generator is a visual tool that builds decorative ribbon banners for your website — corner ribbons, folded banners and bookmark ribbons — without hand-writing CSS. You pick the text, colors, size and position in a live preview, and the tool outputs clean, copy-ready pure CSS plus the matching HTML snippet.

Design the ribbon in the preview, then copy the two outputs: paste the CSS into your stylesheet and the HTML where the ribbon should appear. The HTML is a small wrapper (for example <div class="box"><div class="ribbon"><span>SALE</span></div></div>) and the CSS positions the diagonal band in the corner you chose — no JavaScript and no images required.

A corner ribbon is a diagonal band across one corner of a card or image, typically rotated 45°, used for labels like "SALE" or "NEW". A folded banner is a horizontal strip with triangular tails folded behind each end, used as a standalone heading or price badge. A bookmark ribbon is a vertical strip with a V-shaped notch cut from the bottom, like a physical bookmark, usually pinned to the top edge of a card.

The diagonal band has to cover the full corner of the box, so this generator sets the band width to 1.5 × the ribbon box size. For the default 150px box that is 150 × 1.5 = 225px. The corner diagonal of a 150px square is 150 × √2 ≈ 212.13px, so a 225px band covers it with a small margin. The band is inset −30px and offset 30px from the edge (20% of the box size), with 6px fold triangles (4% of 150px).

When "auto fold color" is on, the small crease triangles are a 25% darker shade of the ribbon color, computed per RGB channel. Example: #3498db becomes #2772a4 (red 52 → 39, green 152 → 114, blue 219 → 164). You can also switch auto off and pick the fold color manually.

Each tail is a pure-CSS border triangle whose top and bottom borders equal exactly half the banner height — for example, a 48px-tall banner uses 24px borders (48 ÷ 2 = 24). Tail width defaults to 30px, and the tails are rendered a 22% darker shade of the banner color so they read as folded behind the main strip.

The bookmark uses clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% − 22px), 0 100%) with a default 22px notch depth. The bottom-center point of the polygon is pulled upward by the notch depth, cutting the classic V shape into the strip — no extra elements or images needed.

Leave the text color on "auto": the generator computes the relative luminance of the background (0.2126·R + 0.7152·G + 0.0722·B, each 0–255) and picks near-black (#1a1a1a) when luminance is above 0.55, otherwise white. It follows the same idea as WCAG contrast guidance, so labels stay legible on light and dark ribbons alike.

No. Every ribbon this tool generates is pure HTML and CSS: rotated elements, border triangles, and clip-path. The live preview you see is exactly what the exported code renders, and the snippet works in any project with zero dependencies.

Yes — all dimensions are plain pixels, so a ribbon renders identically on any screen. Use the size sliders to fit smaller layouts: for example, drop a 150px corner box to 100px and the band, offsets and fold triangles all rescale proportionally (100 × 1.5 = 150px band, 4px folds). The folded banner is an inline-block element that flows with your text.

All modern browsers. Corner ribbons and folded banners use transforms and border triangles, supported everywhere for over a decade. The bookmark ribbon uses clip-path: polygon(), supported in all current Chrome, Edge, Firefox and Safari versions, so no prefixes are needed in the generated code.

Yes — it is completely free with no signup, and 100% of the work happens in your browser; nothing you design is uploaded anywhere. You can use the generated CSS and HTML in personal and commercial projects, and download them as files.