SVG Shape Generator

Create and customize basic SVG shapes, and copy the code.

Shape & Dimensions
Style
Preview
SVG Code

How to Use This Tool

  1. Select a shape type (Rectangle, Circle, Ellipse, or Polygon) from the dropdown menu.
  2. Use the sliders to adjust the Width, Height, and other shape-specific properties like Border Radius or Sides.
  3. Choose a Fill Color and Stroke Color using the color pickers.
  4. Adjust the Stroke Width with the slider.
  5. The preview on the right will update in real-time.
  6. Click the copy button to copy the complete SVG code to your clipboard.

Related Tools

Gradient Maker

Create CSS gradients.

CSS Shadow Generator

Create and customize box-shadow effects.