CSS Ribbon Generator

Generate pure CSS diagonal corner ribbons for pricing tiers, product sales, and featured card callouts.

Ribbon Content & Corner Position

Ribbon Label Text

Corner Position

Styling & Dimension Sliders

Background

Text Color

Font Size (12px)

Ribbon Width (42px)

Depth Shadow Effect

POPULAR

UtilVox Pro Plan

$29 / mo

Full enterprise access to 170+ developer tools and unlimited calculations.

/* Ribbon Container Wrapper */
.ribbon-wrapper {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
}

/* Corner Diagonal Ribbon */
.ribbon {
  position: absolute;
  top: 23px;
  right: -57px;
  transform: rotate(45deg);
  width: 189px;
  padding: 6px 0;
  background: #f5c842;
  color: #1a1500;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  pointer-events: none;
  z-index: 10;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}

Mastering CSS Corner Ribbons, Sale Banners & Promotional Tags

CSS Ribbon Positioning & Geometric Math

Corner ribbons are essential for eCommerce "Sale", "Popular", and "New" product tags. Setting overflow: hidden on the parent card cuts off the excess ribbon ends, leaving a razor-sharp angled diagonal banner.

Corner Position	Rotation Angle	Absolute Coordinate Formula
Top-Right	rotate(45deg)	top: offset; right: -offset;
Top-Left	rotate(-45deg)	top: offset; left: -offset;
Bottom-Right	rotate(-45deg)	bottom: offset; right: -offset;
Bottom-Left	rotate(45deg)	bottom: offset; left: -offset;

Pairing Ribbons with Other CSS Tools

Combine ribbons on pricing cards with our CSS badge generator, add section breaks with our CSS divider generator, or animate cards with our CSS keyframe generator.