.circle {
width: 100px;
height: 100px;
background: #0d9488;
border-radius: 50%;
}Related Tools
CSS Clip-path GeneratorVisual polygon editor
CSS Loader GeneratorAnimated spinners
CSS Animation GeneratorKeyframe animation builder
CSS Transform GeneratorTranslate, rotate, scale
CSS Filter GeneratorVisual image filters
Box Shadow GeneratorCSS shadow studio
Glassmorphism GeneratorFrosted glass effect builder
Gradient GeneratorCSS gradient builderCSS Shape Generator — 37 Shapes, 7 Export Formats
What's included
Features
About this tool
Get the CSS for Any Shape Instantly — Triangle, Star, Heart, Hexagon — 7 Export Formats
You need a triangle for a tooltip pointer and you can't remember if it's border-left or border-right that makes it point right. You need a five-pointed star for a rating component but writing the polygon coordinates from memory is unreliable. Pick the shape from the library here, set the color and size, and copy the CSS — no manual coordinate calculation.
A visual library of 37 shapes in five groups: Triangles (8 directional variants), Arrows and Chevrons (6), Geometric (8: hexagon, pentagon, octagon, star, diamond, and more), Decorative (8: heart, leaf, teardrop, crescent, ring), and UI (7: pill, speech bubble, notch arrow, price tag, trapezoid). Each uses the appropriate CSS technique — the border trick for triangles, clip-path: polygon() for stars and polygons, border-radius for circles and organic shapes, radial-gradient for crescents.
Each technique exists for a specific structural reason. The border trick works because a zero-width, zero-height element's visible area collapses entirely into its border, and adjacent border edges always meet at a 45-degree miter — coloring one side while leaving the others transparent exposes only a triangular sliver, a technique that predates clip-path and still renders in every browser back to IE6. clip-path: polygon() instead lists x/y coordinate pairs as percentages of the element's own box, so the star, hexagon, or heart rescales correctly the moment you resize the element — nothing needs recalculating by hand. border-radius shapes exploit the fact each corner accepts an independent radius: the Leaf sets two opposite corners to 0% and the other two to 100% to pull a square into a curved diamond, while the Teardrop layers a -45 degree rotation on top of a similar asymmetric radius pattern. The Crescent has no clip-path equivalent at all — subtracting one circle from another isn't expressible as a single polygon outline — so it falls back to a radial-gradient with a transparent inner stop offset from center, letting the page background show through as the missing bite without needing mix-blend-mode or a mask image.
Seven export formats: plain CSS class, HTML snippet with <style>, React JSX with a style prop, Tailwind arbitrary-value utilities, SCSS with a $color variable, Styled-Components template literal, and Vue <script setup> with :style binding. Clip-path and border-radius shapes also accept content inside them since the box model is unaffected — only the border-trick triangles have a genuinely empty content box. One shape, any stack, no rewriting.
Step by step
How to Use
- 1Filter and pick a shapeUse the group filter tabs at the top of the left panel — All, Triangles, Arrows, Geometric, Decorative, or UI — to narrow the shape grid. Click any thumbnail to select it. The large preview panel on the right updates immediately and the technique badge in the header shows which CSS method is used (Border, Clip-Path, Border-Radius, etc.).
- 2Set the fill colorUse the Color picker swatch to open the browser color picker, or type a hex value directly into the text input for precision. The shape preview and all export code update live as you change the color.
- 3Adjust size and rotationDrag the Size slider to scale the shape from 50px to 250px. Drag the Rotation slider to rotate it from 0 to 360 degrees. When rotation is non-zero, a ↺ reset button appears to snap it back to 0.
- 4Choose an export formatClick the export tab for your stack: CSS for a plain .shape-name {} class; HTML for a complete <style> + <div> snippet; React for a JSX element with a style prop; Tailwind for arbitrary-value utility classes; SCSS for a class with a $color variable; Styled-C for a Styled-Components template; Vue for a <script setup> component with :style binding.
- 5Copy and paste the codeClick the ⎘ Copy button at the bottom of the export panel to copy the generated code to your clipboard. CSS, HTML, and SCSS outputs are drop-in ready. React, Vue, and Styled-Components outputs are self-contained but may require an import for the library in the target file.
Real-world uses
Common Use Cases
Got questions?
Frequently Asked Questions
The tool uses five core CSS techniques depending on the shape: the Border Trick creates triangles and trapezoids by setting width and height to zero and using transparent borders on adjacent sides; clip-path: polygon() cuts geometric shapes like stars, hexagons, arrows, and hearts from a rectangular element; border-radius creates circles, ovals, squircles, pills, leaves, and teardrops; CSS transform (skewX) creates parallelograms; and radial-gradient creates crescents without needing a background color. Each shape uses only standard CSS — no images, no SVG, no JavaScript.
Choose your preferred export format from the tabs — CSS Class gives you a ready-to-use .shape-name { } block; HTML gives you the full <style> + <div> snippet; React gives you a JSX element with a style prop; Tailwind gives you arbitrary-value utility classes; SCSS extracts the color into a $color variable; Styled-Components gives you a const Shape = styled.div template; and Vue gives you a <script setup> component with :style binding. Copy and paste directly into your project — no modifications needed for the CSS, HTML, SCSS, or Styled-Components formats.
The CSS border trick exploits how borders meet at 45-degree mitered corners. When an element has zero width and height, its visual size is determined entirely by its border widths. By making some borders transparent and one border colored, the colored border appears as a triangle pointing away from its side. For example: width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid teal; creates a triangle pointing upward. The four directional triangles work this way, and the corner variants (top-left, bottom-right, etc.) use two adjacent borders — one colored and one transparent — to create right-angle triangles.
A crescent shape requires a circle with a circular "bite" taken out of it. clip-path cannot subtract shapes — it can only clip to a polygon outline. The radial-gradient approach places a transparent inner circle offset from center inside a solid colored outer circle: background: radial-gradient(circle at 65% 35%, transparent 35%, teal 35%). The transparent region creates the cutout, and the solid region forms the crescent. This technique works with any background behind the element because the transparent section is truly transparent, not masked with a background-colored overlay.
Corner triangles use two adjacent border sides — one colored and one transparent. For a top-left triangle: width: 0; height: 0; border-top: 100px solid teal; border-right: 100px solid transparent; The colored border-top draws the horizontal edge and the transparent border-right determines the diagonal hypotenuse. For bottom-right: border-bottom and border-left. These are perfect for decorative page section dividers, ribbon effects on card corners, and directional callout indicators.
Yes. The Tailwind export uses arbitrary value syntax — for example clip-path shapes become [clip-path:polygon(50%_0%,_100%_50%,_50%_100%,_0%_50%)] where spaces are replaced with underscores per Tailwind arbitrary value rules. Width and height become w-[100px] and h-[100px], background color becomes bg-[#0d9488], and border-radius becomes rounded-[50%]. For border trick triangles, the border values use the [border-bottom:100px_solid_#0d9488] format. All generated Tailwind classes work with Tailwind v3 and v4.
Two shapes have built-in CSS transforms: the Teardrop uses rotate(-45deg) as part of its shape definition, and the Parallelogram uses skewX(-20deg). When you adjust the rotation slider, the Teardrop adds your rotation value to its base -45 degrees — so a 45-degree rotation produces rotate(0deg) which shows it as a simple rounded square, and 90 degrees produces rotate(45deg). The Parallelogram appends rotate(Ndeg) to its skewX(-20deg) so both transforms apply together. All other shapes apply rotation independently via a single rotate() transform.
Most shapes scale perfectly because clip-path uses percentage values which are relative to the element size. Change the width and height and the clip-path shape scales with it. Border-radius shapes like circles and squircles also scale because border-radius: 50% is percentage-based. The main exception is the Border Trick shapes (triangles, trapezoids) — their sizes are defined in absolute pixel values, so to scale them you need to update the border-width values. For fully responsive triangles, consider using a clip-path: polygon(50% 0%, 100% 100%, 0% 100%) on an element with a percentage-based width instead.
Shapes created with clip-path, border-radius, and transform can all hold content inside them. The visible area will be clipped to the shape outline for clip-path shapes, so text should be kept inside the clip region. Good choices for content containers include: Circle, Oval, Squircle, Pill (great for badge labels and buttons), Hexagon (for profile photos), Octagon, and Diamond. Avoid Triangle, Trapezoid, Crescent, and Ring as content containers — they either have zero width/height or their background is defined by gradients/borders rather than a solid fill that clips content cleanly.
A clip-path generator like the CSS Clip-Path Generator on this site is an interactive vertex editor — you drag polygon points to create custom free-form clip paths and get the polygon() coordinates. The CSS Shape Generator is a shape library with pre-built shapes and a customizer — you pick a shape, adjust color, size, and rotation, and get ready-to-use code in 7 different formats. The shape generator also covers shapes that clip-path cannot produce (triangles via the border trick, crescents via gradients, rings via borders) and provides framework-specific exports for React, Vue, Tailwind, SCSS, and Styled-Components that the clip-path editor does not.