CSS Ribbon Generator
Highlight a pricing plan or product card with a diagonal corner ribbon. Set the label, colors, width and corner, and copy the CSS for the wrapper and ribbon.
Last updated: · Runs 100% in your browser
// controls
Presets
160px
Live preview
Generated CSS
.ribbon-card {
position: relative;
overflow: hidden;
}
.ribbon {
position: absolute;
top: 22.400000000000002px;
right: -44.800000000000004px;
width: 160px;
padding: 6px 0;
background: #00ff66;
color: #000000;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-align: center;
transform: rotate(45deg);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}// Example output
.ribbon-card {
position: relative;
overflow: hidden;
}
.ribbon {
position: absolute;
top: 22.400000000000002px;
right: -44.800000000000004px;
width: 160px;
padding: 6px 0;
background: #00ff66;
color: #000000;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-align: center;
transform: rotate(45deg);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}// Features
- ▸Top-left or top-right corners
- ▸Custom label text
- ▸Color and width controls
- ▸Pure CSS, no images
- ▸Works on any positioned card
// How to use
- 01Adjust the controls on the left or pick a preset to start the CSS Ribbon Generator.
- 02Watch the live preview update instantly as you change each setting.
- 03Fine-tune the generated CSS by hand in the code panel if you like.
- 04Click Copy CSS or Download CSS, or Share to send a link to your design.
// FAQ
Your data never leaves your browser. This tool runs 100% locally — no upload, no logging, no analytics on your inputs.
// Related tools
CSS Badge Generator
Generate compact status badges and pill labels with custom colors, radius, casing and an optional status dot.
CSS Card Generator
Generate content cards with background, border, radius, padding, shadow and hover-lift effects.
CSS Triangle Generator
Draw pointing triangles and arrows in pure CSS using the border technique, in any direction and size.