CSS Generators

A collection of css-only ribbon shapes

Get a CSS-only Ribbon Shape made with a single-element and customizable using CSS variables.

<div class="ribbon">Your text content</div>

Click the ribbon to copy the CSS

This is a Ribbon

This is a Ribbon

This is a Ribbon

This is a Ribbon

Ribbon

Ribbon

100%
CSS

100%
CSS

100%
CSS

100%
CSS

This is a Ribbon

This is a Ribbon

This is a Ribbon

This is a Ribbon

This is a Ribbon

This is a Ribbon

This is a Ribbon

This is a Ribbon

This is a Ribbon

A rotated Ribbon

A rotated Ribbon

This is a Ribbon

This is a Ribbon

This is a Ribbon

This is a Ribbon

This is a Ribbon

This is a Ribbon

This is a Ribbon

This is a Ribbon

This is a Ribbon

This is a Ribbon

CSS

CSS

CSS

CSS

CSS

CSS

This is a Ribbon

This is a Ribbon

This is a Ribbon

This is a Ribbon

This is a Ribbon

This is a Ribbon

This is a Ribbon

This is a Ribbon

This is a Ribbon

This is a Ribbon

This is a Ribbon

This is a Ribbon

This is a Ribbon

This is a Ribbon

This is a Ribbon

This is a Ribbon

This is a Ribbon

This is a Ribbon

This is a Ribbon

This is a Ribbon

This is a Ribbon

This is a Ribbon

CSS

CSS

CSS

100%
CSS

100%
CSS

100%
CSS

100%
CSS

100%
CSS

100%
CSS

This is a Ribbon

This is a Ribbon

CSS

CSS

CSS

An Infinite Ribbon

An Infinite Ribbon

An Infinite Ribbon

An Infinite Ribbon

An Infinite Ribbon

An Infinite Ribbon

An Infinite Ribbon

An Infinite Ribbon

An Infinite Ribbon

An Infinite Ribbon

An Infinite Ribbon

An Infinite Ribbon

CSS

CSS

CSS

CSS

A Ribbon

A Ribbon

A Ribbon

A Ribbon

A Ribbon
With Many Lines
Of Text

A Ribbon
With Many Lines
Of Text

A Ribbon
With Many Lines
Of Text

A Ribbon
With Many Lines
Of Text

A Ribbon
With Many Lines
Of Text

A Ribbon
With Many Lines
Of Text

A Ribbon
With Many Lines
Of Text

A Ribbon
With Many Lines
Of Text

A Ribbon
With Many Lines
Of Text

A Ribbon
With Many Lines
Of Text

A Ribbon
With Many Lines
Of Text

A Ribbon
With Many Lines
Of Text

By Temani Afif