CSS Ribbon Generator
Generate a CSS corner ribbon for badges such as New or Sale, with a custom colour, position and text.
Last reviewed by the Radiatus Cloud team
Generate a CSS corner ribbon badge for New, Sale and more.
Need this done properly for your business?
Radiatus delivers secure cloud, DevOps & compliance engineering.
Create corner ribbons with CSS
Corner ribbons are diagonal banners placed across the corner of a card or product, commonly reading "New", "Sale" or "Featured". This generator produces the CSS for a corner ribbon from your chosen corner, colour and text. The ribbon is a rotated, positioned element with a subtle shadow for depth, and it sits inside a container with hidden overflow so the ends tuck neatly behind the corner.
It is a lightweight, image-free way to highlight special items in a grid or gallery.
Draw attention to key items
Ribbons are an effective visual cue in ecommerce and galleries, instantly flagging discounts, new arrivals or featured content. Because the ribbon is pure CSS, it recolours easily for different states and scales crisply. Placing it on a card requires only that the card be a positioned container that hides overflow.
Keep the text short and bold for legibility at the ribbon's angle, and use a colour that stands out against your cards. All generation happens locally in your browser.
Notes on the generated code
Because the css ribbon generator runs entirely in your browser, you can experiment with every option and watch the generated code update instantly, with nothing uploaded and no account required. The output is clean, standards-based CSS that works in any project without external libraries or a build step, so you can paste it straight into your stylesheet and refine it further by hand whenever you need to.
Related tools
- Color Converter — Convert colours between HEX, RGB, HSL, HWB and OKLCH, with alpha support. Runs in your browser and shows the live swatch for each format.
- Accessibility Color Contrast Checker — Check foreground and background colour contrast against WCAG thresholds, with the rules for text size, UI components and states.
- Typography Scale Generator — Generate a modular type scale from a base size and ratio, with fluid clamp() values for responsive layouts.
- Design Token Generator — Generate design tokens as CSS variables, JSON or platform formats, structured in the layers that make them maintainable.
Frequently Asked Questions
How do I attach a ribbon to a card?
Make the card a position-relative container with hidden overflow, then place the ribbon element inside it so the ends tuck behind the corner.
Can I put the ribbon on either corner?
Yes. Choose the top-right or top-left corner in the generator, and the rotation and position adjust automatically.
Does the ribbon use images?
No. It is drawn entirely with CSS using a rotated element, so it is crisp at any size and easy to recolour.
Why keep ribbon text short?
At the ribbon\'s diagonal angle and small size, short, bold text such as SALE or NEW stays legible, while long text becomes cramped.
Privacy & Security
Everything runs in your browser; nothing is uploaded.
How to Use
Choose the corner, colour and text, then copy the HTML and CSS.
Disclaimer: This tool is provided "as is" without warranty of any kind. Results are for educational and utility purposes.
Related Tools
Color Converter
DesignConvert colours between HEX, RGB, HSL, HWB and OKLCH, with alpha support. Runs in your browser and shows the live swatch for each format.
Accessibility Color Contrast Checker
DesignCheck foreground and background colour contrast against WCAG thresholds, with the rules for text size, UI components and states.
Typography Scale Generator
DesignGenerate a modular type scale from a base size and ratio, with fluid clamp() values for responsive layouts.