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. 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
What is free, what needs an account, and where your files go.
Design the whole app, not just the asset.
These tools handle the details. floow.design handles the screens — describe your app in plain English and get pixel-perfect iOS and Android designs you can refine by chat and export to Figma.