Home/Tools/Effects/Ribbon Generator

Effects · Generator

Ribbon Generator

Create corner ribbon / badge overlays for cards with custom text, color, and position.

Ribbon Style

Position

Ribbon Text

Ribbon Width100px

Vertical Offset20px

Font Size13px

Background Color

Text Color

Preview

NEW

Product Card

Sample Product

$29.99

Generated CSS

.card {
  position: relative;
  overflow: hidden;
  /* other card styles */
}

.ribbon {
  position: absolute;
  right: -25px;
  top: 20px;
  width: 100px;
  padding: 6px 0;
  background: #ef4444;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.05em;
  transform: rotate(45deg);
  transform-origin: center center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

100%

Free, no
sign-up needed

Code written
by hand

85+

CSS tools
in one place

<1s

Copy-ready
CSS instantly

What is this

What is the CSS Ribbon Generator?

Generate CSS corner ribbon badges - the "New", "Sale", or "Featured" banners that fold across element corners. Copy CSS and HTML.

Everything runs locally in your browser. Adjust the controls above, preview instantly, and copy clean, production-ready CSS — no account, no upload.

How to use

Using the CSS Ribbon Generator

Everything lives in the panel at the top of this page. There is nothing to install — it all runs right here in your browser.

Set ribbon text and colour

Enter the label ("New", "Sale", "Featured") and pick a background colour. The preview shows the ribbon on a sample card.

Choose corner position

Pick top-right (most common), top-left, bottom-right, or bottom-left. The transform rotation adjusts automatically.

Copy CSS and HTML

Click Copy to get the ribbon element HTML and the complete CSS including the container overflow rules.

The output

What the generated code looks like

Clean, production-ready CSS — no vendor bloat, no unnecessary declarations.

styles.css

.ribbon-container {
  position: relative;
  overflow: hidden;
}

.ribbon {
  position: absolute;
  top: 16px;
  right: -32px;
  width: 120px;
  padding: 6px 0;
  background: #6C2EF5;
  color: white;
  font-size: 0.75rem;
  font-weight: 700;
  text-align: center;
  transform: rotate(45deg);
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  letter-spacing: 0.05em;
}

overflow: hidden on the container is required to clip the rotated ribbon to the card corners.

Pro tips

Pro tips for better results

★

overflow: hidden on the parent is essential

The ribbon is rotated and extends outside the card. Without overflow: hidden on the card container, the ribbon extends visibly beyond the card edges.

★

Keep ribbon text under 8 characters

Longer text does not fit the diagonal ribbon width at typical card sizes. Use single words: "Sale", "New", "Hot", "Beta".

★

Use z-index to ensure the ribbon appears above card content

The card image or content may stack above the ribbon. Add z-index: 1 to the ribbon element to ensure it renders on top.

FAQ

Frequently asked questions

Yes - any element with position: relative and overflow: hidden. It works on cards, images, containers, and any block-level element. The ribbon must be a direct child of the positioned container.

No. Everything runs in your browser. Nothing is sent to a server.