CSS Ribbon & Banner Generator
Generate CSS ribbon and banner shapes for cards, badges, and promotional elements.
Settings
#6366f1
#ffffff
Preview
HTML
<div class="card"> <div class="ribbon ribbon-corner-tr">NEW</div> <p>Card content here</p> </div>
CSS
.card {
position: relative;
overflow: hidden;
padding: 20px;
border: 1px solid #e2e8f0;
border-radius: 8px;
background: #fff;
}
.ribbon-corner-tr {
position: absolute;
top: 20px;
right: -40px;
width: 120px;
padding: 4px 0;
text-align: center;
background: #6366f1;
color: #ffffff;
font-size: 13px;
font-weight: bold;
transform: rotate(45deg);
transform-origin: center center;
}