Corner Shaper

Corner Shaper is a free visual editor that lets you design unique, responsive shapes by manipulating the shape’s corners with modern CSS.

Create playful shapes for various UI elements such as pricing and feature cards, buttons, banners, profile badges, you name it. Then export to your workflow with a click of a button.

Export formats

• CSS: Generates modern clip-path: shape(...) code. Includes a Shape Only mode that copies only the clip-path code—useful for page builders where you already have the wrapper, dimensions, and colors set up and only need code for the geometry (or Full CSS with wrapper class, dimensions, and styling).
• SVG: Exports clean, standalone SVG vector files or copies raw SVG markup directly to your clipboard.
• React: Exports ready-to-use React JSX functional components (<CornerCard> / <CornerShape>) with inline styling and fold flap overlays.
• Figma: Copies vector SVG markup directly to your clipboard for instant pasting as native vector paths into Figma.
• PNG: Exports transparent PNG images with optional 2x scaling.

Changelog

v1.4.0 – September 25, 2026

• Modern Cross-Browser Compatibility: Fixed Chrome and Chromium-based browser rendering by standardizing CSS shape() grammar across all 9 corner styles.
• Fluid Container & Screen Responsiveness: Upgraded all corner styles to use proportional responsive clamping (min(Xpx, Y%)), ensuring shapes scale cleanly to mobile viewports without collision or inversion.
• Strict Dimension Scoping: Enforced clean state separation between unlinked styles (bevel, inverted, blob, dither) and single-dimension styles (folded, round, squircle, steps, zigzag).
• Export Fidelity: Updated SVG and React component exports with proportional edge clamping matching the live canvas.

v1.3.1 – September 8, 2026

• Dither Corner Style: Added a retro pixelated dither corner style with adjustable teeth density, corner roundness, and a randomize button.

v1.3.0 – September 6, 2026

• Full CSS vs. Shape-Only Mode: Added an interactive segmented toggle for CSS export. Full CSS includes .corner-shape, dimensions, and background color, while Shape-Only mode outputs purely the clip-path: shape(...) rule (and relative pseudo-elements for folded flaps) for direct pasting into page builder custom CSS fields.
• Copy as React Code: Added export option to copy crafted shapes as customizable React functional components (<CornerCard> / <CornerShape>) with typed styles and flap overlays.
• Copy as SVG: Added 1-click clipboard copying of clean, W3C-compliant SVG markup directly from the output panel.
• Transparent PNG Export: Added transparent PNG export with optional 2x scaling.
• Multi-Format Code Inspector: Added tabbed navigation across CSS, SVG, and React formats with real-time formatted code previews.
• Interactive Dimensions & Color Controls: Added real-time width/height input fields with full-width and full-height toggles, live solid and gradient color pickers, and a one-click palette shuffle button.

v1.2.0 – September 2, 2026

• Blob Corner Style: Added organic blob corner geometry with adjustable fullness, lobe complexity, and randomized seeds.
• Inverted Curve Unlinking: Independent control over entry (r1), middle (r2), and exit (r3) curve radii for asymmetrical inverted transitions.
• Global Synchronization: Quick toggle to synchronize all active corners simultaneously.

v1.0.0 – August 30, 2026

• Initial Release: Visual corner crafting tool powered by single-element modern CSS shape(). Features round, squircle, bevel, folded, steps, and zigzag styles with SVG and Figma vector exports.