Loading…
Shape Cat tools
Shape Cat starts with a lightweight brand kit generator, then focused tools for palettes, font pairing, mockups, favicons, social cards and image assets. All run locally in your browser.
Brand kit1
Choose a visual starting point: a palette, font recommendations and a PNG brand mark.
Color2
Find color combinations and copy color values for your next design.
Typography1
Compare font pairings and find the fonts for your project.
Mockups4
Turn screenshots, code and product images into visuals to share.
Code to Image
Turn a code snippet into a beautiful syntax-highlighted image — pick a language and theme, add a window frame, gradient background and shadow, export a crisp 2x PNG.
Local
Screenshot Beautifier
Drop a screenshot onto a beautiful background with padding, rounded corners, shadow and a window frame — export crisp 2x PNG.
Local
AI Screenshot Background
Generate screenshot-ready backgrounds from a brief, style, ratio and brand colors. Export SVG / PNG, or hand the prompt to an image model.
AI optional
Mockup Generator
Drop a screenshot into a browser / phone frame with gradient and shadow.
Local
Dev6
Create site icons and social images, or copy CSS for backgrounds, shadows and motion.
Favicon Generator
Make a favicon from text or an emoji — pick color and shape, export PNG.
Local
Social Card Generator
Create 1200×630 Open Graph / social share cards — type text, pick a theme.
Local
Placeholder Image
Generate placeholder images at any size for dev — fully local.
Local
CSS Shadow Generator
Visually generate box-shadow and glassmorphism CSS — copy and paste.
Local
CSS Gradient Generator
Visually build linear / radial gradients with multiple color stops — copy the background CSS.
Local
Cubic-Bezier Easing Editor
Drag control points to shape a cubic-bezier easing curve, watch it animate, copy the timing-function.
Local
Shapes3
Create SVG shapes and section edges for your web pages.
SVG Wave Generator
Generate smooth SVG wave dividers — tune amplitude, count and flip, copy SVG or PNG.
Local
SVG Blob Generator
Generate organic irregular blob shapes — tune points and irregularity, copy SVG or PNG.
Local
SVG Shape Divider Generator
Set container height and amplitude separately, preview 320, 768 and 1440px layouts, then copy SVG or complete section HTML and CSS.
Local