12 Awesome Shape Generators for Your Web Projects 😍🚀
Tags: webdev, design, css, svg
Published: 2022-05-03 15:31:12

---
title: 12 Awesome Shape Generators for Your Web Projects 😍🚀
published: true
description: 
tags: webdev, design, css, svg
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4ua5xez4k3mng9jnfhlj.png
canonical_url: https://madza.hashnode.dev/12-awesome-shape-generators-for-your-web-projects
---
Creating advanced shapes from scratch requires some advanced CSS and SVG knowledge and you might still end up adjusting values afterward. I would recommend using some GUI tools, that offer you a user interface to tweak the parameters.

In this article, I have compiled some of my favorite shape generators. I have further sorted them across the categories like blogs, waves, separators, and miscellaneous, so it is easier to navigate and you can choose between different alternatives in each category.

For each tool I will provide a direct link, a short description, and a preview image, so you can get the initial impression of each generator and its features on the go.

## Blobs

### 1. [Fancy Border Shape](https://9elements.github.io/fancy-border-radius/)

Specify eight border-radius values in CSS and build organic-looking shapes.

![1651590254_1920x929.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1651590405498/cq_KHoOIx.png)

### 2. [Blobmaker.app](https://www.blobmaker.app/)

Blobmaker is a free generative design tool to help you quickly create random and unique SVG shapes.

![1651590275_1882x909.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1651590418814/KyWpHmJS0.png)

### 3. [SVG-shape-generator]( https://www.softr.io/tools/svg-shape-generator)

A free design tool to create colorful, random, unique, and organic-looking SVG shapes. 

![1651590318_1898x924.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1651590429097/NqSwEspZy.png)

### 4. [Squircley.app](https://squircley.app/)

Create beautiful shapes for logos, icons, and background images. Exports SVG files which can be copied straight to the clipboard for dropping into your projects.

![1651590345_1883x921.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1651590436104/mpv2Ce7gY.png)

## Waves

### 5. [CSS Waves](https://getwaves.io/)

Generate SVG waves for your next design.

![1651590478_1882x920.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1651590671760/cB9L9V535.png)

### 6. [Multiple Animated Waves](https://svgwave.in/)

A tiny, free and beautiful SVG gradient waves generator with a simple UI to customize, and style your waves based on your theme specifications.

![1651590492_1920x929.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1651590680633/mq5uy19wu.png)

### 7. [SVG-wave-generator](https://www.softr.io/tools/svg-wave-generator)

A free design tool to create colorful, multilayer, random, unique, and organic-looking SVG waves.

![1651590507_1897x925.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1651590690276/4r543c5Qg.png)

## Separators

### 8. [Shapedivider.app](https://www.shapedivider.app/)

A free tool to make it easier for designers and developers to export a beautiful SVG  
shape divider for their latest project.

![1651590526_1905x929.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1651590744252/jBv0scDeS.png)

### 9. [Shapedividers.com](https://shapedividers.com/)

Create shape dividers on the X or Y-axis. An option to create animated effects as well.

![1651590555_1920x929.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1651590752193/EJUgt5bMl.jpg)

### 10. [Page-dividers](https://omatsuri.app/page-dividers)

Part of the PWA with 12 open source frontend focused tools [Omatsuri](https://omatsuri.app).

![1651590594_1899x930.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1651590760601/yqk1yGusK.png)

## Miscellaneous

### 11. [Rad-lines](https://msurguy.github.io/rad-lines/)

A Vue.js project for generating SVGs of polygons for plotting.

![1651590623_1920x929.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1651590768640/yKAOXJHNQ.png)

### 12. [Trianglify.io](https://trianglify.io/)

A tool to generate low-poly backgrounds, textures, and vectors. It's based on an open-source library  [Trianglify](https://github.com/qrohlf/trianglify).

![1651590634_1920x929.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1651590776298/FT-B9mrxa.png)

<hr>

Writing has always been my passion and it gives me pleasure to help and inspire people. If you have any questions, feel free to reach out!

Connect me on [Twitter](https://twitter.com/madzadev), [LinkedIn](https://www.linkedin.com/in/madzadev/) and [GitHub](https://github.com/madzadev)!

Visit my [Blog](https://madza.dev/blog) for more articles like this.