Robuta

Create a heart shape using modern CSS tricks. You can even transform images into hearts

A CSS-only collection of Tooltips & Speech Bubbles made with a single element and modern CSS

A Collection of CSS-only Ribbon shape made with a single element and modern CSS tricks

🔺 Triangles, arrows, diamonds, tooltips, bubbles, etc. 57 free CSS shapes, ready to use, click to copy.

In a previous article, I showed you how to create some fancy shapes that you can use as section dividers on your websites (a slanted divider, an arrow divider,...

Creating unusual shapes is always a fun exercise and a good way to practice your CSS skills. One might argue that SVG is better for this job, but nowadays we...

A CSS-only collection of Ribbon Shapes made with a single element and modern CSS

It looks like a little bit of magic to watch a shape draw itself on the web. Or like it's probably an embedded video. But it doesn't have to be! In fact, with...

Create a starburst shape using CSS clip-path. Get an optimized & modern code in no time.

Until the introduction of CSS Shapes, it was nearly impossible to design a magazine-esque layout with free flowing text

Create CSS-only Wavy Shapes & Patterns using CSS mask. Get an optimized & modern code in no time.

Use online generators to get the clip-path code of different CSS Shapes (triangle, rhombus, hexagon, star and more)

A CSS-only collection of Triangle Shapes made with a single element and modern CSS.

The modern way to create CSS shapes using a minimal code and a single element. A collection of CSS-only shapes created by Temani Afif.

In this comprehensive guide, Temani Afif explores different techniques for creating common shapes with the smallest and most flexible code possible.

For quick visual adjustments directly on the page

There’s magic in the air around CSS right now. There’s so much new to be excited about. One simple thing that you should get excited about is the CSS...

Use modern CSS to create triangle shapes with an optimized code

Generate a blob shape using clip-path. Get an optimized & modern code in no time.

In Part 1 of the series, Temani Afif demonstrated how creating ribbon patterns in CSS has evolved with the availability of new CSS features. In this second...

Use modern CSS to create shapes with inverted radius, notch, inner curve and more!

Create any kind of Polygon shape using CSS clip-path. Get an optimized & modern code in no time.

After you've got a `border-radius`, you can control the shape of the corner with `corner-shape`, which unlocks a simpler and more powerful way to make shapes...

Create fancy flower shapes using CSS mask. Get an optimized & modern code in no time.

Recreate all the common CSS shapes using corner-shape and border-radius

Jan 16, 2026 - I'm a total sucker for that cyberpunk, high-tech, neon aesthetic. You know the vibe, angular shapes,... Tagged with css, webdev, design.

Modern CSS and modern browser support provides us three excellent methods to create pure, basic CSS shapes. We'll look at making CSS triangles with...