Add an eye-catching "Sale", "New" or "Best value" ribbon to any card. Pick a diagonal corner ribbon, a folded side tag or a simple pill, choose the corner and colours, and copy pure CSS.
Runs entirely in your browser. Nothing is uploaded to any server.
Highlight the plan or product you want people to notice.
Pure CSS stays sharp on every screen and is easy to restyle.
The ribbon position is calculated so it sits neatly across the corner.
A diagonal ribbon is a normal horizontal bar rotated by 45 degrees. For it to sit symmetrically across the corner, the centre of the bar must be the same distance from the top and side edges. The generator works out the top and side offsets from the ribbon length and height so you never have to nudge pixels by hand.
The card gets overflow: hidden so the ends of the rotated bar are trimmed by the card edges. The folded tag instead sticks out of the side, and a small triangle made with borders in a darker shade creates the illusion that it wraps around the card.
Classic corner banner, cropped by the card.
Sticks out of the side with a darker fold.
A simple rounded badge inset from the corner.
The card needs overflow: hidden and position: relative. Both are included in the rb-card rule.
Yes. Wrap the image in an element with position: relative and overflow: hidden, and place the ribbon span inside it.
Short labels work best. For longer text, increase the ribbon length so the words stay inside the visible part.
Yes. The ribbon is real text, so "Sale" is read along with the card content.
Yes. The card keeps overflow visible for tags so the tag can stick out of the side.
More free tools from My Panda Toolbox.