CSS Shape and SVG Generators

Anything that is not a rectangle. Cut an element to a polygon, round it into an organic blob, draw a triangle or ribbon with borders alone, put a wave between two page sections, and get an SVG into CSS without a separate file.

Every Shapes & SVG tool

Blob Generator

Make organic blob shapes with border-radius.

Border Radius Generator

Per-corner border-radius with shorthand and longhand output.

CSS Border Generator

Build a border shorthand with any style, side and radius.

CSS Divider Generator

Slanted, curved, zigzag and wave section dividers in pure CSS.

CSS Shapes Generator

Classic single-element CSS shapes with size and colour controls.

CSS Wave Generator

Wavy section edges from an inline SVG path, copied as CSS.

Clip-Path Generator

Build clip-path shapes — polygons, stars, circles, chevrons — visually.

Corner Ribbon Maker

Diagonal corner ribbons for cards, no images required.

Emoji Favicon Maker

Any emoji into a one-line SVG favicon, no files.

SVG Data URI Encoder

Encode SVG into a compact, quote-safe CSS data URI.

SVG Path Visualizer

Plot SVG path anchors and bezier control handles live.

Triangle Generator

CSS triangles and arrows via border trick or clip-path.

Clipping and rounding

The clip-path editor lets you drag the points of a polygon, circle, ellipse or inset over an image and copies the clip-path rule. Blob radius produces the eight-value border-radius that turns a box into a soft irregular shape, with a randomise button and a slider for how irregular. Border radius handles the ordinary case — each corner independently, with the elliptical syntax when you want it.

Borders and pure-CSS shapes

CSS border sets width, style, colour and per-side variations with a live preview, including the image-based and gradient borders that need border-image. CSS shapes and the triangle generator produce the classic border-trick shapes — triangles, arrows, chevrons, hexagons, stars — as CSS only, no images and no SVG, with the exact dimensions you enter. Ribbon generates the folded corner and banner ribbons used for badges and labels.

Dividers and waves

The CSS divider and wave generators draw the shaped edge between two sections of a page — curves, slants, waves, zigzags — as an inline SVG sized to the container, with flip and layered options. The output is one block of markup and CSS that can be dropped between any two sections.

SVG utilities

SVG data URI encodes an SVG file for use directly in a background-image or mask, handling the characters that break a plain data URI and offering Base64 as an alternative. The SVG path visualiser renders a d attribute you paste and lists each command with its coordinates, so a path from a design tool can be read and edited. Emoji favicon turns any emoji into an SVG favicon and the link tag to use it, for a quick placeholder or a tiny site.

All in the browser

Previews, exports and encodings happen on your device. There is no upload and nothing persists between visits.