I have made 100+ CSS-only Ribbon Shapes | The Perfect Collection 🎀
Tags: css, webdev, beginners, showdev
Published: 2023-11-13 10:37:12

It's time for another collection! After [the loaders](https://dev.to/afif/css-loaderscom-the-biggest-collection-of-loading-animations-more-than-500--23jg), [the hover effects](https://dev.to/afif/100-underline-overlay-animation-the-ultimate-css-collection-4p40), and [the background patterns](https://dev.to/afif/i-created-100-unique-css-patterns-the-best-collection-31cl), let's make some Ribbon Shapes!

----

## <center> 👉 [CSS Ribbon Shapes](https://css-generators.com/ribbon-shapes/) 👈 </center>

----

More than 100 CSS-only Ribbon Shapes that are made using a **single element**. Yes, only one element per shape (even the most complex ones). 

Stop looking at CSS Ribbons made with old and obsolete code. Mine are made with modern CSS and optimized with CSS variables. There are no magic numbers or fixed dimensions. All the shapes fit whatever content you put inside them and you can easily control them by adjusting a few variables.

What are you waiting for? All it takes is one click to copy the CSS of any ribbon shape.

---

You will find the classic ribbons but a lot of new and fancy ones. I won't detail all of them but here are some of my favorites.

### The Multi-line Ribbons

Probably the ones I like the most. It was a bit challenging to create a repeating shape that fit multi-line text. In the end, The final result is satisfying.


![CSS only ribbon shapes with many lines of text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/joec2uinjhg4ifzuqtl4.png)


Here are two interactive demos where you can edit the text and see how the shape adjusts to fit the content.

{% codepen https://codepen.io/t_afif/pen/ZEwOZVB %}

{% codepen https://codepen.io/t_afif/pen/BaMRQor %}


### The Curved Ribbons

It wasn't easy to combine straight text with a curved shape but I found a few interesting ideas


![CSS only ribbon with curved shapes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jh1c69dmbefuowgml51a.png)

## The Infinite Ribbons

A Ribbon that never ends? why not! You will find a few of them that extend to the edge of the screen in any direction you want (top, bottom, right, left).


![CSS-only infinite ribbon shapes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cehplm8u5h7o83wevd1u.png)

They are built without pseudo-elements and won't create any overflow issues. Here are two demos to illustrate some of them (best viewed at full screen)

{% codepen https://codepen.io/t_afif/pen/NWoRJMy %}

{% codepen https://codepen.io/t_afif/pen/rNqJYrZ %}

---

What about you? Which one do you like? 👇

You can get a unique link for each ribbon. If you like the `#54` then the link is: https://css-generators.com/ribbon-shapes/#r54

You can easily share your favorite Ribbon Shape!

---

If you want to know the secret behind building such shapes, I have written a few articles that you can find here: https://css-articles.com

I will be writing more in the future so make sure to [subscribe to my RSS feed](https://css-articles.com/feed.xml) to not miss them.

I also shared a lot of [CSS Tips around ribbon shapes](https://css-tip.com/archive/?s=ribbon) so make sure to also subscribe [to the RSS feed of my CSS Tip website](https://css-tip.com/feed/feed.xml)

----

{% link https://dev.to/afif/i-made-100-css-loaders-for-your-next-project-4eje %}

{% link https://dev.to/afif/100-underline-overlay-animation-the-ultimate-css-collection-4p40 %}

{% link https://dev.to/afif/i-created-100-unique-css-patterns-the-best-collection-31cl %}

----

### <center>You want to support me?</center>

[![buy me a coffee](https://cdn.buymeacoffee.com/buttons/default-orange.png)](https://www.buymeacoffee.com/afif)

### <center>OR</center>

[![Become a patron](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/db3jtgy2i5l4w8slkps5.png)](https://www.patreon.com/temani)