MicroTools

CSS Shapes Generator

Generate CSS triangles, stars, polygons, and custom clip-path shapes. Copy CSS, HTML, or React code instantly.

Size120px
Shape: Triangle Up
CSS border trick
.shape {
  width: 0;
  height: 0;
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
  border-bottom: 120px solid #6366f1;
}

Browser Support

PropertyChromeFirefoxSafariEdge
border (trick)✓1+✓1+✓1+✓12+

About CSS Shapes Generator

Generate CSS shapes online — triangles, stars, polygons, arrows, and more. Get ready-to-use CSS, HTML, and React code with browser support info. Build custom clip-path shapes visually.

How to Use

  1. 1Browse the shape gallery and click a shape to select it.
  2. 2Filter by category or search by name.
  3. 3Adjust color and size using the controls.
  4. 4Switch between CSS, HTML+CSS, and React tabs to copy the code.
  5. 5Use the custom clip-path editor to build your own shape.

Frequently Asked Questions

What shapes are available?
Over 30 shapes across 5 categories: Triangles (6), Polygons (8), Stars (5), Arrows (5), and Special shapes (8) including heart, crescent, pac-man, speech bubble, and ring.
How does the custom shape builder work?
Enter any valid clip-path value (e.g. polygon(50% 0%, 0% 100%, 100% 100%)) and see it rendered live with the generated CSS code.
Which CSS techniques are used?
Shapes use border tricks (triangles), clip-path: polygon(), clip-path: path(), border-radius, and box-shadow depending on the shape.
What is the browser support?
Most shapes work in all modern browsers. clip-path polygon() is supported in Chrome 55+, Firefox 54+, Safari 9.1+, Edge 79+. The browser support table is shown for each technique.

Tool Info

Category
dev
Usage
Unlimited

Related Tools

CSS Visual Generator

Generate CSS gradients, box shadows, and border radius visually with live preview.

Code Minifier & Beautifier

Minify or beautify CSS, JavaScript, and HTML. Shows file size savings instantly.

Regex Tester

Live regex testing with match highlighting, capture groups, replace mode, and 12 common patterns.

More dev tools

JSON Formatter

Format, validate, and beautify JSON data.

Base64 Encode/Decode

Encode text to Base64 or decode Base64 to text.

Encoder / Decoder

Encode & decode text with 15+ formats: Base64, URL, Hex, Binary, Morse, ROT13, JWT, SHA-256 and more.

GitHub Repository Scanner

Visualize any public GitHub repo: file tree, stats, README, and contributors.