How does a pure CSS corner ribbon work?

The parent container has `position: relative` and `overflow: hidden`, while the ribbon element uses `position: absolute` with a 45-degree CSS `transform: rotate()`.

Do I need any images or SVGs?

No, this creates 100% pure CSS ribbons with zero external dependencies.

Can I put the ribbon on either corner?

Yes, select between Top Left and Top Right positions.

Is it responsive on pricing tables and cards?

Yes, because the parent uses overflow hidden, the ribbon automatically clips to whatever card dimensions you define.

Can I customize font styles?

Yes, standard letter-spacing, uppercase, and bold font rules are generated.

CSS Ribbon & Badge Generator

Design pure CSS corner ribbons, folded paper banners, and card badges without images.

100% free
Private in browser
No signup
No watermarks

Badge Text

Corner Position

Ribbon Color

Text Color

FEATURED

Pro Plan

Get access to all premium features and analytics.

Learn more →

HTML Code

<div class="ribbon-card">
  <div class="corner-ribbon">FEATURED</div>
  <h3>Card Title</h3>
  <p>Product or promotion content goes here.</p>
</div>

CSS Code

.ribbon-card {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  padding: 24px;
  background: #1e1e24;
}

.corner-ribbon {
  position: absolute;
  top: 0; right: 0;
  width: 140px;
  background-color: #ef4444;
  color: #ffffff;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 6px 0;
  transform: translateY(20px) rotate(45deg);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}

Rate this tool

Be the first to rate — helps others and improves this page.

About CSS Ribbon & Badge Generator

Design pure CSS corner ribbons, folded paper banners, and card badges without images. Use this free client-side tool on TheToolss with zero installation and complete privacy.

How to use CSS Ribbon & Badge Generator

Enter your ribbon banner text (e.g., SALE, NEW, PRO)
Select corner position (left or right)
Pick ribbon and text colors
Copy the HTML and CSS snippet directly into your app

Key features

Pure CSS angled corner ribbon
No images or icon fonts required
Configurable colors, text, and dimensions
Live interactive pricing card preview

Frequently asked questions

How does a pure CSS corner ribbon work?: The parent container has `position: relative` and `overflow: hidden`, while the ribbon element uses `position: absolute` with a 45-degree CSS `transform: rotate()`.
Do I need any images or SVGs?: No, this creates 100% pure CSS ribbons with zero external dependencies.
Can I put the ribbon on either corner?: Yes, select between Top Left and Top Right positions.
Is it responsive on pricing tables and cards?: Yes, because the parent uses overflow hidden, the ribbon automatically clips to whatever card dimensions you define.
Can I customize font styles?: Yes, standard letter-spacing, uppercase, and bold font rules are generated.