CSS Ribbon Generator
Generate CSS ribbon/banner styles with fold effects, shadow, and corner positioning.
- Home
- Web Dev
- CSS Ribbon Generator
Content Box
What is a CSS Ribbon?
A CSS ribbon is a decorative banner element that can be positioned at the corner or edge of a container. They're commonly used for "Sale", "New", "Featured", or other promotional badges on e-commerce and content websites.
This tool features:
- Four styles — Fold (classic folded ribbon), Flag (hanging flag), Corner (triangular corner marker), Staple (simple pinned banner).
- Four positions — Top Left, Top Right, Bottom Left, Bottom Right.
- Customizable — Ribbon color, text color, text, font size, width, fold size, and shadow toggle.
- Presets — Common ribbon labels like Sale, New, Hot, Updated, Featured.
How to Use
- Choose position — Select where the ribbon appears (corner or edge).
- Pick a style — Fold, Flag, Corner, or Staple.
- Customize colors — Set ribbon background and text colors.
- Adjust size — Font size, ribbon width, and fold size.
- Copy the CSS — Click Copy CSS and add the
.ribbonclass to your HTML.
Frequently Asked Questions
Do I need JavaScript for this ribbon?
No. The generated CSS uses only pseudo-elements (::before, ::after) for the fold effects. No JavaScript required.
Can I position the ribbon on any corner?
Yes. The generator supports all four corners (top-left, top-right, bottom-left, bottom-right) with appropriate positioning and fold calculations for each.