⬡

CSS Shape Generator

Generate CSS border-radius for rounded shapes and pure CSS triangles. Live preview with copy-ready code.

CORNERS
12px
Quick Shapes

About CSS Shape Generator

Generate CSS code for two fundamental CSS shapes: rounded corners using border-radius and pure CSS triangles using the border trick. Both techniques are widely used in UI design for buttons, cards, tooltips, and decorative elements.

How CSS Triangles Work

CSS triangles exploit the fact that element borders meet at angles. By setting an element to zero width and height and making three borders transparent while one is colored, the colored border appears as a triangle. No images or SVG needed.

Frequently Asked Questions

The CSS border-radius property rounds the corners of an element. You can set all four corners at once or individually. Using 50% on a square element creates a perfect circle; 999px or a very large value creates a pill/stadium shape.
CSS triangles are used as tooltip arrows, dropdown carets, decorative dividers, and speech bubble tails. They require no image assets and scale perfectly at any size.
Yes — border-radius works on any HTML element. It applies to the element's background and border, but not to content that extends beyond the box unless you also add overflow: hidden.
For simple directional arrows and carets, CSS triangles are lighter and require no extra files. For more complex shapes, rotated triangles, or when you need the triangle to be interactive with click areas, SVG is more flexible and accessible.

About CSS Shape Generator

CSS Shape Generator creates pure CSS shapes — triangles, arrows, stars, speech bubbles, and more — using only CSS properties (borders, clip-path, transforms). No images or SVG required. Copy the generated CSS and paste it into your project.

How to Use

  1. Select a shape type from the shape gallery.
  2. Adjust size and color with the controls.
  3. The live preview shows the shape rendered in real CSS.
  4. Click Copy CSS to get the full CSS code for the shape.

How It Works

Shapes like triangles use the CSS border trick (transparent borders on three sides, colored on one). Stars and arrows use clip-path: polygon(). Speech bubbles combine border-radius with a pseudo-element for the tail.

Example

A right-pointing triangle: set width: 0; height: 0; border-top: 50px solid transparent; border-bottom: 50px solid transparent; border-left: 80px solid #6366f1;

Frequently Asked Questions

CSS shapes are resolution-independent (perfect on retina/HiDPI displays), have zero file size, are easily customizable via CSS variables, and are animatable. They are ideal for decorative UI elements like arrows, dividers, and icons.
Yes. For border-trick shapes, change the colored border value. For clip-path shapes, change the background-color property. Both support CSS variables for easy theming.
Yes. The border trick has been supported for over 15 years. clip-path shapes work in all modern browsers. The generated CSS requires no vendor prefixes for the shapes in this tool.
Yes, using pseudo-elements (::before / ::after). Set position: absolute on the pseudo-element and position: relative on the parent to overlay a CSS shape as a background decoration.