CSS Ribbon Generator

Create decorative CSS ribbons with customizable colors, sizes and positioning.

Position

Text

Width180px

Height42px

Ribbon Color

Text Color

NEW

Ribbon Preview

.ribbon {
  position: absolute;
  top: 24px;
  left: -45px;
  width: 180px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #3b82f6;
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  transform: rotate(45deg);
  transform-origin: center;
}

What is CSS Ribbon Generator?

Create decorative ribbons and badge-style elements using CSS. Customize their colors, dimensions and positioning while generating ready-to-use CSS.

How to use

Choose the ribbon style.
Set the ribbon size and colors.
Adjust the positioning and appearance.
Copy the generated CSS.

Features

Pure CSS ribbons
Custom colors
Adjustable dimensions
Multiple ribbon styles
Live preview

Common Use Cases

Sale badges
Featured labels
Product cards
Promotional banners
UI decorations

Example

Input

Text: SALE
Color: #e74c3c
Width: 160px
Height: 40px

Output

.ribbon {
  position: relative;
  width: 160px;
  height: 40px;
  background: #e74c3c;
  color: white;
  text-align: center;
  line-height: 40px;
}

FAQ

Does the generator use pure CSS?

Yes.

Can I customize ribbon colors?

Yes.

Can ribbons be used as badges?

Yes.

Missing a feature?

If this tool doesn't cover your use case or is missing functionality, please let me know through the Contact page.

New improvements and features are added based on user feedback.

Related Tools

CSS Border Generator

Generate CSS border styles.

CSS Transform Generator

Generate CSS transform styles.

CSS Triangle Generator

Generate CSS triangles.