UUUP Tools

Design Tools

CSS Ribbon Generator — Corner Badge Styles

Visually generate tilted corner-ribbon CSS for cards. Change text, colors, offset, width, and font size for sale, sold-out, and similar status badges.

Quick switch→CSS Box Shadow Generator
CSSBadgeRibbon
Quick switch:CSS Box Shadow GeneratorCSS Clip PathCSS Gradient Generator

Favorite this tool

No favorite storage mode has been selected.

Quick actions

Back to Design Tools Browse all tools

Copy this tool URL or open the system share sheet on a supported device.

Use cases

  • Add a promo ribbon to a product card corner
  • Mark sold-out or new status
  • Nudge offset so the badge does not cover the main image

How to use

  1. Enter ribbon text and choose a corner
  2. Adjust color, offset, width, and font size
  3. Confirm parent overflow settings, then copy the CSS

Example input and output

Config

Text HOT DEAL, position top-right, red background / white text

CSS

.ribbon { position: absolute; transform: rotate(45deg); ... }

FAQ

Why are ribbon corners clipped?

Tilted ribbons often overflow the box. The parent needs position: relative, and overflow: hidden depends on the preview toggle.

Can I customize selectors?

Yes. Card and ribbon selectors are editable; the generated snippet uses the selectors you enter.

Tools

Related tools

Continue with another translated tool for a nearby task.

CSS Box Shadow Generator

CSS Box Shadow Generator — Visual Controls

Available

Visually adjust offset, blur, spread, color, opacity, and inset. Preview live and generate box-shadow CSS for cards, buttons, and overlays.

CSS Shadow box-shadow
Open tool

CSS Clip Path

CSS Clip Path — Shape Generator

Available

Generate CSS clip-path shapes from presets and simple controls with a live preview—useful for angled cards, badges, image crops, and decorative layouts.

CSS clip-path Shape
Open tool

CSS Gradient Generator

CSS Gradient Generator — Linear, Radial, Conic

Available

Visually build linear, radial, and conic CSS gradients. Adjust angle and stop positions, add multiple stops, and copy CSS for backgrounds, buttons, and brand transitions.

CSS Gradient Background
Open tool