Free47 tools · 13 editors · no sign-up
M2 Creative Studio
Design, diagram and create — right in your browser
Database diagrams, CVs, carousels, designed PDFs, colour palettes and photo edits — made on your device, downloaded without a watermark.
Flagship editors
Full workspaces for serious work
Live previews, templates, checks and real exports. The big ones open full screen and save as you go — here's what each one makes.
Social Studio
Instagram & LinkedIn Carousel Maker
Swipe-worthy Instagram and LinkedIn carousels — from a template or your own draft.
Document Studio
Text to PDF
Paste plain text and get a designed document or slide deck — then edit any page by hand.
Photo Studio
Photo Collage Maker
Drop in photos, pick one of 60+ layouts, then add filters, text and stickers.
Career Studio
Portfolio Website Builder
Design your personal site visually and download it, ready to host.
Design Studio
Code Screenshot Generator
Turn code into a polished image with syntax highlighting, window chrome and a gradient.
How it works
From idea to download in three steps
Every tool runs in your browser. There's no account to create, your work stays on your device, and downloads have no watermark.
- 1
Pick a studio
Design, diagrams, careers, social posts, documents or photos — each studio groups the tools for one kind of job.
- 2
Make it in your browser
Edit with a live preview. Big editors open full screen and save as you go on this device.
- 3
Download and use it
Export PNG, SVG, PDF or code — no watermark, no sign-up, as many times as you like.
- Nothing uploadedYour files and designs are processed on your device.
- Saves as you goThe big editors keep your work in this browser between visits.
- No watermarkExport PNG, SVG, PDF, SQL and more — as often as you like.
- Phone to desktopEvery studio adapts to small screens, with full screen on big ones.
Exports to
- PNG
- SVG
- JPG
- WebP
- SQL
- Prisma
- DBML
- Mermaid
- DOCX
- ZIP
- HTML
- CSS
- JSON
- ICO
- Markdown
The studios
Everything you make, sorted by what you're making
6 studios, each built around one kind of job. Pick one, or show only the full editors — every tool has its own page with instructions, examples and FAQs.
Studio 01 · 28 tools
Design Studio
Colour, CSS, type and graphics
Build a palette and check it's readable, then turn ideas into copy-ready CSS — gradients, shadows, layouts, type scales and animations — or clean up SVGs and make mockups.
Colour & accessibility
6- Color PickerPick a color and get its HEX, RGB and HSL codes instantly.
- Color ConverterConvert colors between HEX, RGB, HSL, HSV and CMYK.
- Color Palette GeneratorBuild harmonious palettes: complementary, analogous, triadic and more.
- Tints & Shades GeneratorGenerate lighter tints and darker shades of any color.
- Contrast Checker (WCAG)Check text and background colors against WCAG accessibility rules.
- Color Blindness SimulatorSee how images and palettes look with protanopia, deuteranopia, tritanopia and achromatopsia.
CSS generators
8- CSS Gradient GeneratorDesign linear and radial gradients and copy the CSS.
- Box Shadow GeneratorDesign CSS box shadows visually and copy the code.
- Border Radius GeneratorShape rounded corners per corner and copy the CSS.
- Glassmorphism CSS GeneratorFrosted-glass cards with backdrop blur — live preview and copy-ready CSS.
- Neumorphism CSS GeneratorSoft, extruded UI shapes with double shadows — live preview and CSS.
- CSS Button GeneratorDesign buttons with colours, gradients, radius, shadows and hover effects — copy the CSS.
- CSS Clip-Path GeneratorClip images into polygons, circles and stars by dragging points, and copy the clip-path CSS.
- Design Token ConverterConvert design tokens JSON into CSS variables, Tailwind v3/v4 themes, SCSS, Less or TypeScript.
Layout & proportions
4- Aspect Ratio CalculatorFind an image or video's aspect ratio and resize it without distortion.
- Golden Ratio CalculatorSplit any length by the golden ratio φ ≈ 1.618 for layouts and design.
- CSS Flexbox GeneratorLearn and build flexbox layouts visually — direction, wrap, alignment, gap and per-item flex.
- CSS Grid GeneratorBuild CSS grid layouts with template columns, gaps, auto-fit and spanning items, then copy the CSS.
Typography
3Animation
2SVG, images & mockups
5- SVG OptimizerShrink SVG files by removing editor junk and rounding numbers — with a safe preview.
- SVG Path EditorVisualise and edit SVG path data: drag points, convert absolute/relative, flip, scale and minify.
- Code Screenshot Generator EditorTurn code into a beautiful image with syntax highlighting, themes, window chrome and gradients.
- Device Mockup Generator EditorPut a screenshot into a phone, tablet, laptop or browser frame and download a PNG.
- Placeholder Image GeneratorMake placeholder images of any size and colour — PNG, JPG, WebP or an inline SVG data URI.
Studio 02 · 5 tools
Diagram Studio
Databases, data flows and ideas
Draw ER diagrams from SQL, multi-level data flow diagrams, flowcharts, mind maps and timelines — then export images, PDFs, SQL or documentation.
- ERD Maker EditorNewDesign database diagrams with crow's-foot relationships — import SQL or DBML, generate SQL for 4 databases.
- Data Flow Diagram Maker EditorNewDraw DFDs with entities, processes, data stores and labelled flows — levels 0–2, validation and templates.
- Flowchart Maker EditorDrag-and-drop flowchart editor with smart connectors, templates and PNG, SVG or PDF export.
- Mind Map Maker EditorTurn an indented outline into a colourful mind map — SVG or PNG.
- Timeline Maker EditorCreate vertical or horizontal timelines from a simple list — SVG or PNG.
Studio 03 · 2 tools
Career Studio
CVs and portfolio sites
Write a country-ready, ATS-friendly CV with a live preview, then build the portfolio website that goes with it.
Studio 04 · 1 tool
Social Studio
Posts and carousels
Design swipeable carousels for Instagram and LinkedIn from a template or plain text, then download every slide.
Studio 05 · 3 tools
Document Studio
Designed PDFs and handwriting
Turn plain text into a designed PDF and fine-tune every page, write it out in realistic handwriting, or set up a letterhead.
- Text to PDF EditorPaste any text and get a professionally designed PDF — headings, tables, code and links detected automatically, with live preview.
- Text to Handwriting ConverterTurn typed text into realistic handwritten notes on notebook, grid or Cornell paper — download PDF, PNG or SVG.
- Letterhead MakerDesign a company letterhead with logo, contact details and footer — print or save as PDF.
Studio 06 · 8 tools
Photo Studio
Collages, effects and finishing touches
Combine photos into collages, add filters, borders and watermarks, annotate screenshots, pixelate details and make favicons.
- Photo Collage Maker EditorMake photo collages with 60+ editable layouts, smart mosaic, filters, text and stickers — sized for Instagram, stories or print.
- Merge ImagesCombine photos side by side, stacked or in a grid into one image — with spacing, margins and a background colour.
- Screenshot Annotator EditorDraw arrows, boxes, highlights, text and numbered steps on a screenshot, and blur private details.
- Grayscale & Photo FiltersTurn photos black and white, sepia, or adjust brightness and contrast.
- Watermark ImageAdd a text watermark to photos, positioned and sized your way.
- Favicon GeneratorCreate favicon.ico and app icons in every size from one image.
- Add Border & Rounded CornersAdd a coloured border, round the corners, crop to a circle or drop a shadow — saved as PNG.
- Image PixelatorPixelate a whole photo or just the areas you select — hide faces and plates, or make pixel art.
Learn
Guides that go with the studio
- Guide · DesignHow to Make a Flowchart: Symbols, Steps and a Worked ExampleThe flowchart symbols you actually need, a six-step method, a worked password-reset example and the habits that keep charts readable — plus the common mistakes to avoid.Oct 16, 2026 · 6 min read
- Guide · EducationThe 12 Best AI Course Creators in 2026, Compared by What They Actually DoAI course generators, course platforms, video tools and corporate authoring compared: what each AI creates, real prices, free plans and the hidden fees to check.Oct 11, 2026 · 16 min read
- Guide · PDFHow to Make a Professional PDF From Plain Text (Free)The typesetting rules that make a document look professional, and a free way to apply them: paste text, get a designed PDF, then fine-tune any page visually.Oct 9, 2026 · 8 min read
- Guide · BusinessHow to Make an ATS-Friendly Resume That Still Reads WellWhat applicant tracking systems actually read, the formatting that trips them up, how to use job-advert keywords honestly, and bullet points that rank and persuade.Oct 6, 2026 · 7 min read
- Guide · ImagesHow to Prepare Photos and Signatures for Online Application FormsExam, visa, passport and job portals reject photos for size, dimensions or background. A checklist and step-by-step method to get accepted on the first upload.Oct 4, 2026 · 8 min read
- Guide · DesignHow to Check Color Contrast for Accessibility (WCAG)What contrast ratios WCAG requires for text, large text and icons, how the ratio is calculated, and how to fix failing colors without changing your brand.Oct 4, 2026 · 6 min read
Creative Studio
Common questions
Everything on M2Toolkit that you make something with, in one place — from a colour palette or a CSS gradient to a database diagram, a CV, an Instagram carousel or a designed PDF.
What is M2 Creative Studio?
It's the part of M2Toolkit for making things: design and CSS tools, diagram editors, the CV and portfolio builders, the carousel maker, document tools and photo tools, grouped into studios. Each tool also has its own page with instructions and examples.
Is it free?
Yes. Every tool in the studio is free to use with no sign-up, and downloads have no watermark.
Where is my work saved?
On your device. The full-screen editors save automatically in your browser as you work, and several let you download a project file to open later or on another computer. Nothing you make is uploaded to our servers.
Can I use what I make for work or clients?
Yes — what you create with the tools is yours to use, including for commercial projects. The fonts built into the editors are open-licence fonts that allow commercial use.
Do the tools work on phones?
Yes. The tools adapt to small screens, and the big editors switch to a phone layout with panels that slide up from the bottom. For long design sessions a larger screen is more comfortable.
Which tool should I start with?
For a database, the ERD Maker; for how data moves through a system, the Data Flow Diagram Maker; for a job application, the Resume Builder; for social posts, the Carousel Maker; for a colour scheme, the Color Palette Generator and Contrast Checker.
Start creating
Your next design is one click away
Free, private and ready in your browser — no account, no download, no watermark.