CSS Ribbon & Banner Maker | Pure CSS Corner Ribbons

CSS Ribbon & Banner Maker

Create high-conversion promotional ribbons and folded banners for your pricing cards. Generate pure CSS geometry utilizing advanced pseudo-elements and the classic CSS border hack.

Ribbon Style
Text Content
Background Color
Invalid Hex Code
Text Color
Invalid Hex Code
POPULAR
How to Generate Pure CSS Ribbons
Promotional ribbons (like “Sale”, “Popular”, or “New”) draw the user’s eye and significantly increase click-through rates on pricing tables and ecommerce product grids. Here is how to use our generator to build a customized ribbon without Photoshop:
  1. Select the Ribbon Style: Choose between a classic Corner Ribbon (which slants across the corner of a card) or a Folded Banner (which juts out from the side of the card, featuring a 3D folded shadow effect).
  2. Input Your Copy: Keep your text short and punchy. Words like “SALE”, “BEST VALUE”, or “PRO” fit best. The tool restricts you to 15 characters to prevent the CSS geometry from breaking.
  3. Select Colors: Pick a high-visibility background color (reds, oranges, and deep blues convert best). The tool automatically calculates a darker shadow shade for the Folded Banner style.
  4. Export and Apply: Click “Copy CSS”. Paste the generated styles into your CSS file. Ensure the parent container of your ribbon has position: relative; applied to it!
Technical Deep Dive: The Pseudo-Element Fold Hack
While the Corner Ribbon is relatively straightforward (utilizing simple CSS transforms and rotations), the Folded Banner style requires complex geometry to create the illusion of a 3D shadow wrapping around the back of the card.
The ::before Shadow Trick
To create the tiny triangle that acts as the “fold” shadow, we utilize the classic CSS border intersection hack on the ::before pseudo-element of the ribbon.
We set the width and height of the pseudo-element to exactly 0. Then, we apply two thick borders to it. By setting one border to a darkened shade of your primary ribbon color, and setting the intersecting border to transparent, we isolate a perfect right-angle triangle.
We then use absolute positioning (top: 100%; left: 0;) to perfectly tuck this shadow triangle directly underneath the jutting edge of the main banner. This entire process happens automatically in the code our generator provides.
Developer Use Cases for CSS Banners
Relying on pure CSS for these badges provides a massive advantage over utilizing external image assets, particularly regarding responsive design and dynamic data.
1. SaaS Pricing Tables
When presenting three pricing tiers (e.g., Basic, Pro, Enterprise), anchoring the user’s focus on the middle “Pro” tier is a proven psychological sales tactic. Applying a Corner Ribbon that says “Most Popular” instantly establishes a visual hierarchy, guiding the user toward your preferred conversion point.
2. Ecommerce Product Grids
If you run a WooCommerce or Shopify store, you likely have dynamic data indicating which items are currently discounted or out of stock. Because this ribbon is pure HTML/CSS, you can easily tie it to your backend logic (e.g., <div class="ribbon"><?php echo $discount_percentage; ?></div>). This is impossible if you use static image banners.
The Golden Rule: Understanding Overflow
The most common issue developers face when implementing CSS ribbons is dealing with the parent container’s overflow property.

⚠️ Corner Ribbon vs. Folded Banner:

– If you use the Corner Ribbon, the parent card MUST have overflow: hidden; applied to it. Otherwise, the edges of the rotated rectangle will stick out past the corners of the card.

– If you use the Folded Banner, the parent card MUST NOT have overflow: hidden;. The fold shadow needs to jut out outside the physical boundary of the card. If you hide the overflow, the 3D fold will be clipped and disappear.
Accessibility Considerations
Since the ribbon is absolutely positioned, it sits on top of the document flow. Ensure that your ribbon does not physically cover important text or interaction points (like an “Add to Cart” button) inside the card. Furthermore, ensure the text contrast ratio between your ribbon’s text color and background color meets the WCAG 4.5:1 standard.
Explore More Free CSS UI Tools
Return to our CSS Tools Hub to access our full collection of client-side developer utilities designed to streamline your frontend workflow.


CSS Triangle Generator
Learn the foundation of the border hack by generating custom directional arrows for your tooltips and popovers.



Smooth Box Shadow Tool
Give your pricing cards a massive visual upgrade by layering multiple transparent drop shadows.



CSS Flexbox Visualizer
Struggling to align your product grid? Use our interactive playground to master Flexbox layouts instantly.



Mesh Gradient Maker
Generate beautiful, organic backgrounds to serve as the canvas for your newly designed UI components.


Frequently Asked Questions
Why does my corner ribbon stick out of the card?
To create a corner ribbon, the CSS draws a long rectangle and rotates it 45 degrees. The edges of this rectangle naturally hang outside the parent container. You must apply overflow: hidden; to the parent card class so the browser “clips” the overhanging edges.
How does the generator calculate the fold shadow color?
Our JavaScript engine mathematically extracts the RGB values from your selected background hex code and applies a 20% darkening algorithm. It then injects this darker shade directly into the pseudo-element’s border property to simulate a realistic lack of light on the fold.
Can I animate the ribbon on hover?
Yes! Because the ribbon is purely CSS, you can apply standard transition properties. A popular effect for the “Folded Banner” is to increase the left or right offset value on :hover to make the ribbon slide further out from behind the card.
   
  



	Scroll to Top