CSS Ribbon Generator
Design a pure-CSS folded-corner ribbon badge with a live preview and copyable code.
Card content goes here
.ribbon-wrap {
position: relative;
overflow: hidden;
}
.ribbon {
position: absolute;
top: 0;
right: 0;
width: 180px;
padding: 6px 0;
background: #e53e3e;
color: #ffffff;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.05em;
text-align: center;
text-transform: uppercase;
transform: translateX(25%) rotate(45deg);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
.ribbon::before,
.ribbon::after {
content: "";
position: absolute;
bottom: -8px;
border: 4px solid #942828;
z-index: -1;
}
.ribbon::before { left: 0; border-right-color: transparent; }
.ribbon::after { right: 0; border-left-color: transparent; }<div class="ribbon-wrap"> <div class="ribbon">SALE</div> <!-- your card content --> </div>
How the CSS folded-corner ribbon works
A CSS ribbon badge is built from a wrapping element with position: relative; overflow: hidden; and an absolutely positioned bar rotated 45 degrees into the corner with transform: rotate(). The parent's clipped overflow trims the bar into a clean diagonal strip. The optional folded-corner effect is two small triangles drawn with the ::before and ::after pseudo-elements, each using transparent borders on opposite sides to form a triangular wedge in a darker shade of the ribbon color, mimicking a folded strip of paper tucked behind the badge. Pick a corner, tune the size, colors, and font, then copy the generated CSS and HTML directly into your project — everything is computed in your browser.
Private & free — this tool runs entirely in your browser.