Browser-onlyNo uploadsAlways free
About Us·Contact

100+ tools · No signup · Always free

CSS Shape Generator

Generate CSS triangles, arrows, blobs, stars and hexagons with live preview. Border-based triangles, clip-path polygons and border-radius blobs — copy CSS and HTML instantly.

TriangleArrowBlobStarHexagon

How to use

1

Choose a shape type

Select from Triangle, Arrow, Blob, Star or Hexagon. Each uses a different CSS technique — border trick for triangles, clip-path polygon for arrows/stars/hexagons, and border-radius for blobs.

2

Set dimensions and colors

Enter width and height in px, rem or %. Choose a shape color and a preview background. For triangles, width controls the base and height controls the depth (perpendicular distance from base to tip).

3

Configure shape parameters

Pick the direction for triangles and arrows. Adjust H/V radii per corner for blobs (or click a preset or Random). Set the number of points and inner radius for stars. Choose flat-top or pointy-top for hexagons.

4

Copy the generated code

Hit Copy CSS to get the complete CSS rule or Copy HTML for the div element. Paste both into your project. The CSS class name is customisable — change it in the controls before copying.

What CSS shapes are used for

Tooltips & speech bubbles

CSS triangles are the classic technique for tooltip tails. A tiny border-trick triangle positioned at the edge of a tooltip box creates a pointing indicator without any images.

Navigation arrows

CSS arrows work as prev/next indicators, carousel controls and breadcrumb separators. The clip-path arrow shape is scalable, accessible and needs no icon font.

Hero & background blobs

Organic blob shapes are widely used as decorative background elements in hero sections, feature cards and testimonial blocks — giving layouts an approachable, modern feel without SVG files.

Ratings & badges

CSS stars are used for rating systems, achievement badges and decorative graphic elements. A 5-pointed star at any size using clip-path needs no image — it's pure CSS.

Profile & icon containers

Hexagonal containers are popular for team member photos, tech skill icons and dashboard metric cards. The clean geometric shape stands out from the standard square/circle.

Sorting & dropdown cues

Tiny border-based triangles are the standard technique for sort-order indicators (▲▼) in tables, select-box dropdown arrows and accordion expand/collapse icons.

How it works

Border triangle math

For triangles, the generator sets width and height to 0, then applies three borders: two transparent (forming the sides) and one colored (forming the face). Half the width value is used for the two transparent borders; the full height becomes the visible border.

clip-path computation

Arrows, stars and hexagons are computed as polygon vertex lists. Stars use trigonometric alternation between outer and inner radii for all 2N points. Hexagon vertices are placed at 0°, 60°, 120°, 180°, 240°, 300° (or offset 30° for flat-top).

Elliptical border-radius

The blob output uses the CSS border-radius elliptical syntax: h1 h2 h3 h4 / v1 v2 v3 v4, where the four horizontal and four vertical radii control the curvature at each corner independently. All values are in % so the shape scales proportionally.

Instant live preview

All CSS values are applied as inline React styles on a real DOM element — the preview is genuinely what the browser renders. Changing any control updates the preview and the generated code simultaneously, with no re-renders or delays.

Related tools

Border Radius Generator

Design rounded corners, circles, pill buttons and organic blob shapes.

CSS Animation Generator

Animate CSS shapes with 16 presets, keyframe editor and Tailwind output.

CSS Gradient Generator

Build linear, radial and conic CSS gradients with live preview.

CSS Box Shadow Generator

Multi-layer shadows, neumorphism and glow effects.

Frequently asked questions

Quick answers about this free online tool.

CSS triangles use the border rendering trick. When an element has zero width and height, its four borders meet at the centre point, each forming a triangle. By making three borders transparent and one colored, you get a visible triangle. For example, a triangle pointing up uses: width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid blue. The border-left and border-right control the base width; border-bottom controls the depth.

clip-path: polygon() clips an element to a custom polygon shape. You provide a list of x% y% coordinates that define the vertices of the polygon — the browser draws straight lines between them and clips the element to that shape. The background, content and box-model of the element still occupy their full space; only the visible painted area changes. Stars, hexagons, arrows, and chevrons are all made this way.

The CSS elliptical border-radius syntax (border-radius: h1 h2 h3 h4 / v1 v2 v3 v4) lets you set different horizontal and vertical radii per corner. When values are asymmetric, corners become ellipses rather than circles. Using % values that complement each other (e.g. top-left-H + top-right-H ≈ 100%) produces closed, organic blob shapes without any SVG or JavaScript. This tool's Blob editor gives you full control over all 8 values.

A CSS triangle uses the border trick and produces a simple triangular shape — no shaft, just the arrowhead. A CSS arrow (as generated by this tool) uses clip-path: polygon() to produce a fully-filled arrow shape with both a head and a body/shaft. The clip-path approach works on any element size and is easier to control precisely; the border trick only works at 0×0 and is limited to simple triangular shapes.

clip-path: polygon() is supported in all modern browsers: Chrome 55+, Firefox 54+, Safari 9.1+, Edge 79+. Global support exceeds 96%. There is no IE11 support, but that browser is effectively retired. For the border-based triangle technique, there is no special browser requirement — it works everywhere including IE6.

Yes — but with different approaches per technique. Border-based triangles can be animated by transitioning individual border widths. clip-path polygons can be animated with CSS transition or animation as long as both keyframes have the same number of polygon points (the browser interpolates vertex positions). border-radius blobs can be animated by transitioning the border-radius value, producing organic morphing effects. The CSS Animation Generator tool (linked below) can help you create these animations.

A 5-pointed star uses clip-path with 10 alternating outer and inner radius points. The formula: for each of the 10 points, compute (x, y) = (cx + r × cos(angle), cy + r × sin(angle)), alternating between outer radius (r = 50%) and inner radius (r = 50% × inner ratio). The inner ratio controls how 'spiky' the star is — lower values give sharper points. This tool computes the polygon coordinates for any number of points (3–12) and any inner ratio.

For pixel-perfect decorative shapes, use px — it gives direct control over exact dimensions. For shapes that should scale proportionally with their parent, use % (note: for the border-based triangle, % on border widths is not supported — use px or rem). rem scales with the root font size, making shapes that grow with user font-size preferences. For clip-path polygon() shapes, the vertices are always defined in % regardless of the element's width/height unit.