CSS is an incredibly powerful styling tool that allows us to create complex shapes and more. However, doing this from scratch takes a lot of time, hence the need for tools to speed up the process.
In this article, we will learn about the seven best CSS shape generators and how these tools will allow us to generate any CSS shape of our choice.
Jump ahead:
- CSS Generators
- CSS Portal
- Squircley app
- Get Waves
- Blobmaker
- Softr shape generator
- Neumorphism generator
CSS Generators
CSS Generators is a fantastic website that you can use to generate different shapes and patterns directly in your browser. With CSS Generators, you can make seven different shapes and patterns: starburst, polygon, wavy, custom borders, section dividers, custom corners, and CSS patterns.
However, in this article, we will look at how to generate starburst, polygon, and wavy shapes.
Starburst shapes
A starburst shape is a shape or design with emanating rays that resembles the flash of light produced by an exploding star. Although a starburst shape looks interesting, it can be time-consuming when you try to generate them from scratch. However, with the starburst shape generator from CSS Generators, we can easily generate any starburst with the number of sides and features we like.
To start creating starburst shapes, head to this link. From there, you will be met with a page similar to this:
Clicking any of the options that arrow one points to allows you to select a star with a fill or outline. The area arrow two points to is the canvas where you see changes. Arrow three points to the area that houses the part you can use to determine the width of the star.
It also houses the menu for modifying borders when you select a star with an outline and has a slider to specify the number of sides of the star. Lastly, arrow four points to the generated CSS you can copy and use in your project.
The shape in the image above is a dodecagram. Here’s the generated CSS for it:
.box {
width: 200px;
aspect-ratio: 1;
clip-path: polygon(100.00% 50.00%,78.98% 57.76%,93.30% 75.00%,71.21% 71.21%,75.00% 93.30%,57.76% 78.98%,50.00% 100.00%,42.24% 78.98%,25.00% 93.30%,28.79% 71.21%,6.70% 75.00%,21.02% 57.76%,0.00% 50.00%,21.02% 42.24%,6.70% 25.00%,28.79% 28.79%,25.00% 6.70%,42.24% 21.02%,50.00% 0.00%,57.76% 21.02%,75.00% 6.70%,71.21% 28.79%,93.30% 25.00%,78.98% 42.24%);
}
Note: To use the generated CSS, you should create an HTML tag and give it a class name from the CSS Generator. Your element can look like this:
<div class="box"></div>
Polygon shapes
Creating a polygon from scratch using CSS requires some level of patience. However, the polygon shape generator is a great help as it can be used to create any polygon of our choice. To start creating polygon shapes, navigate to the CSS Generators website:
Let me explain what’s going on here in more detail. The steps for generating a polygon using CSS Generators are similar to generating a starburst shape. However, arrow three houses an extra slider that can be used to rotate the shape.
The shape in the image above is an octagon, and below is the generated CSS for it:
.box {
width: 200px;
aspect-ratio: 1;
clip-path: polygon(98.75% 61.10%,76.63% 92.32%,38.90% 98.75%,7.68% 76.63%,1.25% 38.90%,23.37% 7.68%,61.10% 1.25%,92.32% 23.37%,98.75% 61.10%,calc(92.32% - 2.54px) calc(23.37% - -1.60px),calc(61.10% - 0.67px) calc(1.25% - -2.93px),calc(23.37% - -1.60px) calc(7.68% - -2.54px),calc(1.25% - -2.93px) calc(38.90% - -0.67px),calc(7.68% - -2.54px) calc(76.63% - 1.60px),calc(38.90% - -0.67px) calc(98.75% - 2.93px),calc(76.63% - 1.60px) calc(92.32% - 2.54px),calc(98.75% - 2.93px) calc(61.10% - 0.67px),calc(92.32% - 2.54px) calc(23.37% - -1.60px));
}
Note: Just like the starburst steps, you should create an HTML tag and a class name from the CSS Generator:
<div class="box"></div>
Wavy shapes
Creating a wavy shape with CSS may seem like a herculean task. However, using CSS Generators makes the job more manageable. You can start creating wavy shapes here. You will be met with a page similar to this:
What’s going on here? Let’s dive into it. Arrow one points to the menu for choosing between a filled, vertical flowing, or a horizontal flowing wave. In the image above, the horizontal flowing wave was selected.
Arrow two points to the resizable canvas where changes to the wave become visible. The third arrow points to the menu, where you choose between having multiple (repeat) or a single (no repeat) wave. In the image above, we have chosen multiple (repeat).
Arrow four indicates the menu used to specify border width. You can choose the kind of unit from the dropdown comprising pixels, percentages, and more. In the image above, we selected eight pixels.
Arrow five points at the menu used to specify the size of the wave, which we set to We set the size to 30px. Next, arrow six points at the menu used to specify the curvature of the wave, and arrow seven is used to copy the generated CSS code.
Learn more →The generated CSS is as follows:
.box {
--mask:
radial-gradient(38.99px at 50% calc(100% + 18.00px),#0000 calc(99% - 8px),#000 calc(101% - 8px) 99%,#0000 101%) calc(50% - 60px) calc(50% - 19px + .5px)/120px 38px ,
radial-gradient(38.99px at 50% -18px,#0000 calc(99% - 8px),#000 calc(101% - 8px) 99%,#0000 101%) 50% calc(50% + 19px)/120px 38px ;
-webkit-mask: var(--mask);
mask: var(--mask);
}
Note: In order to use the generated CSS, you should create an HTML tag and a class name from the CSS Generator. Your element can look like this:
<div class="box"></div>
CSS Portal
CSS Portal is another cool website with tons of custom styles and shape generators. With the CSS Portal tool, you can easily generate visually appealing shapes and patterns such as triangles, border radiuses, buttons, clip paths, flip switches, cubic beziers, scrollbars, and more. Also, The generated shapes can easily be modified and tweaked. This article will look at the triangle generator to generate a shape.
Triangles
The first step to creating a triangle with CSS Portal is to visit this link. You’ll see an interface that looks similar to this:
The first arrow points to the menu to select the triangle’s direction. There are eight directions: top, bottom, left, right, top-right, top-left, bottom-right, and bottom-left. In our example, we selected top as the direction of the triangle.
Moving on, the second arrow points to the menu for selecting the type of triangle. There are only three options available: isosceles, equilateral, and scalene. Next, the third arrow points to the menu to select the triangle’s background color. It accepts every format for writing color, including RGBA, RGB, Hex, color names, and selecting from a color wheel. We have #FF4532 selected in the image above.
Our fourth arrow points at the menu for selecting the dimensions and size of the triangle. Here, you can select the width, height, and degree of rotation. We have selected a width of 232px, a height of 218px, and a 0deg rotation.
Essentially, whatever changes you make at the menus of arrows one through four would reflect on the canvas, where the fifth arrow is pointing.
Also, like with CSS Generators, you can copy the generated CSS code. You can do so by using the section that the sixth arrow is pointing at.
The generated CSS code for the triangle we have in the image above is:
.triangle {
width: 0px;
height: 0px;
border-style: solid;
border-width: 0 116px 218px 116px;
border-color: transparent transparent #FF4532 transparent;
transform: rotate(0deg);
}
Note: In order to use the generated CSS, you should create an HTML tag and class name from the CSS Portal. Your element should look like this:
<div class="triangle"></div>
Squircley app
The Squircley app is a great tool for generating squares, four-sided polygons, and circles. It also provides a downloadable version of the shape that was created and the generated SVG code. After navigating to Squircley, the page we see will look similar to the image provided below:
Squircley provides a simple interface that focuses on creating three kinds of shapes. The image above contains arrows pointing to different parts that can be used to change the created shape.
Arrows one, two, and three point to the sliders used to rotate, scale, and apply a curvature to the generated shape. Meanwhile, the fourth arrow is used to specify the shape’s fill (or background color). The changes to the shape are visible on the canvas where the fifth arrow is pointing.
Interestingly, clicking the button that the sixth arrow points to allows us to download the generated shape as an image that we can use anywhere. Similarly, the seventh arrow points to the button that can be used to copy the generated SVG code of the shape. To use the generated shape, we can embed it in a web page as follows:
// html (svg)
<svg viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<path
d="M 0, 62.5
C 0, 13.749999999999998 13.749999999999998, 0 62.5, 0
S 125, 13.749999999999998 125, 62.5
111.25, 125 62.5, 125
0, 111.25 0, 62.5"
fill="#FADB5F"
transform="rotate(-45,100, 100) translate(37.5,37.5)"
></path>
</svg>
Get Waves
Get Waves is an amazing website that you can use to generate different types of wave shapes for your next project. Additionally, it has a feature that allows it to generate wave shapes randomly. After navigating here, you will see a page similar to the images below:
To begin the journey of creating a wave shape for your project, you can start from the first arrow menu in the first image above. The first arrow menu contains the options for the type of wave you can generate. There are three options available to choose from. The next menu beside the first arrow has options for selecting the type of shape you want to create. The options are fill and outline.
The next step is to set the color and the opacity of the color. To do that, you can use the second and third arrow menus. The former allows us to enter the color of our choice using the format of our choosing, while the opacity can range from 0 to 100 percent.
Next, we can use the fourth arrow menu to vary the distortion of the wave, ranging from a straight line to a very spiked shape. The sweetest part of this tool is that you can generate a totally random wave shape using the button pointed out by the fifth arrow.
The sixth arrow points at the generated shape, while the seventh points at the button that brings up a pop-up modal. A sample of the pop-up modal is shown in the second image.
Finally, the eighth and ninth arrows point to the buttons that can be used to download the shape as an image or copy it as an SVG.
To use the generated shape, we can embed it into a web page like so:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#0099ff" fill-opacity="1" d="M0,288L48,272C96,256,192,224,288,197.3C384,171,480,149,576,165.3C672,181,768,235,864,250.7C960,267,1056,245,1152,250.7C1248,256,1344,288,1392,304L1440,320L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>
Blobmaker
A blob is actually a binary large object. However, in our case, we will define a blob as a small drop or lump of something viscid or thick. Blobs are used to create visually appealing background images for landing pages, headers, hero pages, and more. In programming, we learn that we shouldn’t reinvent the wheel. Hence, instead of spending a lot of time generating blobs from scratch using CSS, we can use the Blobmaker shape generator.
Blobmaker provides a great interface for generating triangles into pentagons and circles into distorted shapes. It provides six different menus that we can use to generate shapes. The menus are all pointed out in the images below with an arrow:
To get started, the first arrow points to the end result of our created shape. Then, the second arrow is pointing at the menu for selecting colors, while the third arrow is used to transition between a triangle, quadrilateral, irregular quadrilateral, and a pentagon. The slider for generating a circle to a distorted shape is held by the menu that the fourth arrow points to.
The menus at the fifth and sixth arrows are used to download the shape as an image and open a modal with the generated styles, respectively. Finally, the button at the seventh arrow is used to generate a random shape automatically.
The generated shape for the shape in the image above is as follows:
<!--?xml version="1.0" standalone="no"?-->
<svg
id="sw-js-blob-svg"
viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg"
>
<defs>
<linearGradient id="sw-gradient" x1="0" x2="1" y1="1" y2="0">
<stop id="stop1" stop-color="rgba(248, 117, 55, 1)" offset="0%"></stop>
<stop id="stop2" stop-color="rgba(251, 168, 31, 1)" offset="100%"></stop>
</linearGradient>
</defs>
<path
fill="url(#sw-gradient)"
d="M11.6,-22.8C14.1,-18.7,14.5,-13.6,20,-9.7C25.5,-5.7,36.2,-2.9,35.7,-0.3C35.2,2.3,23.6,4.6,16.6,5.9C9.5,7.2,7,7.6,5,10.3C3,13,1.5,18.2,0.4,17.5C-0.8,16.9,-1.6,10.5,-7.5,10C-13.5,9.6,-24.5,15.1,-26.6,14.4C-28.6,13.7,-21.5,6.9,-19,1.5C-16.5,-3.9,-18.5,-7.9,-20.1,-14.9C-21.7,-21.9,-23,-31.9,-19.5,-35.4C-16.1,-39,-8.1,-36,-1.7,-33C4.6,-30,9.2,-26.9,11.6,-22.8Z"
width="100%"
height="100%"
transform="translate(50 50)"
stroke-width="0"
style="transition: all 0.3s ease 0s"
></path>
</svg>
Softr shape generator
Another amazing tool on our list is the softr SVG shape generator. It can be used to generate similar shapes to the Blobmaker:
Similar to some of the tools mentioned above, we can select the color of the shape using the menu at the first arrow. We can toggle random shapes using the menu directed by the second arrow. However, the third and fourth arrow menus are used to transition between a triangle, quadrilateral, and a pentagon — and a circle to a distorted shape.
The menu at the fifth arrow provides three options for getting the shape, which include: downloading it as a PNG, SVG, or copying the code for the shape.
Finally, the generated shape becomes visible on the canvas at the sixth arrow. Meanwhile, the code sample of a generated shape from the softr shape generator is as follows:
<!--?xml version="1.0" standalone="no"?-->
<svg
id="sw-js-blob-svg"
viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg"
>
<defs>
<linearGradient id="sw-gradient" x1="0" x2="1" y1="1" y2="0">
<stop id="stop1" stop-color="rgba(248, 117, 55, 1)" offset="0%"></stop>
<stop id="stop2" stop-color="rgba(251, 168, 31, 1)" offset="100%"></stop>
</linearGradient>
</defs>
<path
fill="url(#sw-gradient)"
d="M19.3,-22C25.2,-18.1,30.3,-12.1,34,-4.1C37.8,4,40.2,14.3,36.3,20.8C32.4,27.3,22.2,30,13.3,30.8C4.4,31.6,-3.1,30.5,-11.3,28.6C-19.5,26.7,-28.3,24,-33.9,17.8C-39.6,11.6,-42.1,1.9,-40,-6.5C-37.9,-14.9,-31,-21.9,-23.6,-25.6C-16.2,-29.2,-8.1,-29.6,-0.7,-28.8C6.7,-27.9,13.4,-25.9,19.3,-22Z"
width="100%"
height="100%"
transform="translate(50 50)"
stroke-width="0"
style="transition: all 0.3s ease 0s"
></path>
</svg>
Neumorphism generator
Neumorphism is a design style used in graphical user interfaces. It combines light and shadows to form amazing shapes. You can learn more about using neumorphism in CSS in our guide here.
We will use Neumorphism.io to generate our shape. Here, we would meet an interface like the one in the image below:
The menus at arrows A, B, C, and D are used to specify the direction where the shadows will come from. The option at arrow B was selected in the image above. The canvas for seeing the changes on the shape is shown in the first arrow, while the menu at the second arrow can be used to specify the background color where the shape will be used.
The menus at the third arrow can be used to specify the size, radius, distance, intensity, and blurriness. The fourth menu arrow can be used to specify the kind of neumorphic shape you want.
Finally, you can copy the generated CSS styles. It should look similar to this:
{
border-radius: 50px;
background: #a6a6a6;
box-shadow: -20px 20px 60px #8d8d8d, 20px -20px 60px #bfbfbf;
}
Conclusion
We have looked at seven amazing tools we can use to generate CSS styles. These tools enhance how we use CSS and enable us to deliver cool shapes for our projects.
Thank you for reading through. I hope you enjoyed this article, and be sure to leave a comment if you have any questions. Happy coding!
Is your frontend hogging your users' CPU?
As web frontends get increasingly complex, resource-greedy features demand more and more from the browser. If you’re interested in monitoring and tracking client-side CPU usage, memory usage, and more for all of your users in production, try LogRocket.
https://logrocket.com/signup/LogRocket is like a DVR for web and mobile apps, recording everything that happens in your web app, mobile app, or website. Instead of guessing why problems happen, you can aggregate and report on key frontend performance metrics, replay user sessions along with application state, log network requests, and automatically surface all errors.
Modernize how you debug web and mobile apps — Start monitoring for free.
