Free tools
Free mobile app design tools
30 tools that each do one job properly — colour, assets, layout, typography and the iOS and Android numbers you keep looking up. Every one exports to CSS, Tailwind, SwiftUI, Compose, React Native and Flutter. No sign-up, no watermark, no limits.
Color & contrast
Pull palettes out of references, check them against WCAG, and pressure-test them for color-blind users before they ship in an app.
- Color Picker from ImagePull a palette out of any image, assign it to screen roles, and export it as tokens or native code.
- Contrast CheckerTest any pair against WCAG 2 and the newer APCA method, with a colour-blind check and the nearest passing colours.
- Colour Blindness SimulatorSee your screens through every type of colour vision deficiency at once, and download the whole comparison.
- Hex to RGB ConverterConvert between HEX, RGB, HSL, HSB, OKLCH and CMYK, and generate a full 50–950 ramp with native code.
Assets & export
Convert, resize, frame and package the image assets an App Store or Play Store submission actually asks for.
- WebP ConverterBatch-convert PNG, JPEG, WebP and AVIF in your browser, with a quality slider, optional resize and a live size comparison.
- SVG to PNG ConverterRasterise any SVG at 1x to 4x, or export every iOS scale and Android density as one archive.
- Phone Mockup GeneratorDrop screenshots into realistic iPhone and Android frames, then export every combination as PNG and SVG.
- Image to Base64Turn images into data URIs ready for CSS, HTML, JSX, SwiftUI, Compose or Flutter — several at a time.
- App Icon GeneratorUpload one square icon and get every iOS and Android size, the Xcode manifest and the adaptive icon layers.
- App Store Screenshot GeneratorCaption and frame up to ten screenshots, then export them at every App Store and Play Store size at once.
- Splash Screen GeneratorGenerate launch screens at every iOS and Android size in light and dark, with the Flutter and Expo config.
Layout & CSS
Generate the CSS behind the layouts, gradients, shadows and shapes you keep hand-writing for mobile screens.
- Flexbox GeneratorBuild a flex layout visually, then export it as CSS, Tailwind, SwiftUI, Compose, React Native or Flutter.
- CSS Grid GeneratorLay out rows, columns and gaps visually, then export as CSS, Tailwind, LazyVGrid, Compose or Flutter.
- Gradient GeneratorBuild linear, radial and conic gradients with as many stops as you need, then export to CSS, SwiftUI, Compose, React Native or Flutter.
- Box Shadow GeneratorStack multiple shadows with a live preview, then export as CSS, Tailwind, SwiftUI, Compose elevation or Flutter.
- Mesh Gradient GeneratorGenerate soft multi-point mesh gradients and export them as CSS, native code or a phone-sized image.
- Border Radius GeneratorShape each corner independently, preview the iOS continuous curve, and export to CSS, SwiftUI, Compose or Flutter.
- Blob GeneratorGenerate organic blob shapes as SVG, PNG, CSS border-radius or a native SwiftUI and Compose path.
Mobile specs
Look up the iOS and Android numbers — screen sizes, icon sizes, safe areas, screenshot dimensions — without opening a spec PDF.
- Aspect Ratio CalculatorWork out the missing width or height for any ratio, with the common phone and store ratios one click away.
- Device Size ReferenceScreen dimensions, density and safe areas for current handsets — searchable, and exportable as code.
- px to rem ConverterConvert pixels to rem, em, pt, dp and sp, with every density export size and a full token scale.
- iOS App Icon SizesEvery iOS icon dimension, what it is used for, and the scale factor behind it.
- Notch & Safe Area SimulatorPreview your screen against real notches and home indicators, and export the inset code for six platforms.
- App Development Cost CalculatorEstimate what a mobile app costs to build, with a phase split, a calendar range and a proposal you can send.
- App Store Screenshot SizesRequired screenshot dimensions for the App Store and Google Play, with counts and limits.
AI generators
Get a first draft from AI: names, personas, and the written scaffolding around a mobile app.
Typography & content
Pair fonts, build a type scale, and get placeholder content that looks right at phone sizes.
- Placeholder Image GeneratorBuild placeholder images at any size as PNG, WebP or a sub-kilobyte SVG data URI — no third-party service.
- Font Pairing ToolTry real Google Fonts pairings at mobile sizes, then export the type code for six platforms.
- Type Scale GeneratorBuild a modular type scale sized for phone screens, and export it to CSS, Tailwind, SwiftUI, Compose or Flutter.
Why these free tools exist
Most “free design tools” are lead-gen bait — a limited demo that stops working after two or three uses, one that stamps a watermark across whatever you make, or one that lets you build the thing and then asks for an email before it will let you copy it. These 30 are not that. There is no sign-up wall, no credit system, no watermark and nothing to run out of. Copy it, download it, export the whole set — it all works on your first visit, logged out.
Nearly all of them run entirely in your browser, which is why they are instant and why your screenshots never leave your device. Every configuration you build gets a shareable link, and every generator exports real code for the platform you ship on — CSS, Tailwind, SwiftUI, Jetpack Compose, React Native and Flutter — with the conversions done properly rather than pasted from the CSS values.
So how is it paid for? A single ad sits at the bottom of each page, below the tool and below the writing — never inside the thing you are working in, never as a pop-up, and never in the way of a copy or download button. Sign in with a free account and it disappears entirely. That is the whole arrangement.
They also share a bias. These are not generic web design utilities with a mobile label bolted on — they are built around the specific problems of shipping a phone app: safe area insets, adaptive icon masking, store screenshot dimensions, dp versus sp, and colour that still reads in direct sunlight.
How to use these tools together
- Pull a palette out of a reference image with the colour picker, then verify every text-on-surface pair in the contrast checker and pressure-test it in the colour blindness simulator.
- Settle typography with the font pairing tool and the type scale generator, converting sizes as you go with the px to rem converter.
- Build the layout with the flexbox and CSS grid generators, then add depth with box shadows and gradients.
- Check it against real hardware in the safe area simulator and the device size reference.
- Ship the store assets: the app icon generator, the splash screen generator and the App Store screenshot generator, checked against the required store sizes.
Frequently asked questions
- Are these mobile app design tools actually free?
- All 30 tools are free with no usage limits — no credit card, no watermarks, and no cap on how many times you run any of them. Every tool works in full without an account: you can use it and see the result. A free sign-in is only needed at the point you want to download, export or copy the output.
- Do I need an account to use them?
- Not to use them. Every tool runs and shows you a live result with no account at all. Signing up free is only required for the payoff — downloading a file, exporting an asset set, or copying generated code to your clipboard.
- Are my images and screenshots uploaded to a server?
- No, for almost every tool. The colour, image, mockup and converter tools all run entirely in your browser using the Canvas API, so your files never leave your device. Only the two AI tools — the app name and persona generators — send your text description to a server to generate a response.
- Can I use the output commercially?
- Yes. Everything these tools produce — icon sets, mockups, CSS, gradients, SVG shapes, converted images — is yours to use in commercial projects. There is no licence, no attribution requirement and no watermark on any output.
- Which tools work best together?
- Start with the colour picker to pull a palette from a reference, verify the pairs in the contrast checker, then use the type scale and font pairing tools to settle typography. When you are ready to ship, the app icon generator, splash screen generator and App Store screenshot generator produce the store assets.