Seven free tools: gradients, image compression, SVG, CSS units, favicons, passwords and colour palettes. Everything is computed locally, nothing is sent to a server.
Vectors without the extra weight.— Tiny SVG
A tool for optimizing SVG code and reducing file size.
This SVG optimizer helps you reduce the weight of vector graphics, which is critical for website loading speed and SEO. The tool removes unnecessary tags, comments, metadata, and whitespace, making the code as clean as possible.
What gets stripped
Comments
Metadata
Invisible elements
Redundant groups
Whitespace and empty tags
Overlong paths
Three steps to a lighter SVG
Upload
Open an SVG file in the editor.
Compare
The preview shows the original and the result, with the compression percentage and final size next to it.
Take it
Download the file or an archive, or copy the code.
Where it helps
Icons, logos and illustrations on a website — especially when there is a lot of SVG. Unlike simple converters, you control the optimization and see the result before you download the file.
Lighter images, same quality.— Image compressor
Raster image compression right in the browser: MozJPEG, WebP, AVIF, JPEG XL and other codecs.
Reduce image weight so pages load faster. Pick a codec, tune the balance between quality and file size, and compare the result with the original before saving.
When to compress
Online stores, blogs and landing pages where images make up most of the page weight. The smaller the files, the better the LCP (Largest Contentful Paint) and the higher the PageSpeed Insights score.
Gradients that come alive.— Gradient fabric
A powerful CSS gradient builder with layers, an animation editor and an intuitive interface.
Create complex and beautiful gradients for your website without writing code. Our CSS gradient generator lets you experiment with colors, transparency, and gradient types, getting ready-to-use code in one click. The built-in animation editor with a timeline brings gradients to life: place keyframes, set values for them, and the builder smoothly blends the gradient between them.
What the builder is made of
Layer support
Overlay multiple gradients on top of each other to create unique effects.
Full control
Configure linear, radial, and angled gradients.
Live animation
A timeline with a track for every layer: place keyframes and the gradient blends smoothly between them. The result is instant.
Ready-to-use code
Copy clean CSS code for your project, including ready-made @keyframes for animations.
From idea to CSS
Build
Add layers, pick the gradient type and tune colors, transparency and angles.
Animate
Turn on the timeline, place keyframes and set values — the gradient blends smoothly between them.
Take the code
Copy the finished CSS together with @keyframes, or download the file.
What for
Backgrounds for buttons, banners, product cards and entire website sections, as well as living animated backgrounds, shimmering headings and splash screens. The result is plain CSS with no JavaScript or third-party libraries.
One colour. The whole palette.— Spectrum Cell
A colour palette generator built on harmony rules: precise control over every colour, an accessibility check and a ready theme at the end.
Pick a base colour on the wheel, set a harmony rule and get a palette of 3 to 12 colours. Edit any colour by hand, build a palette from an image, check the contrast and colour-blind vision, see the result on a mockup and export it to CSS, SCSS, Tailwind, JSON and other formats. Everything runs in the browser: your images are never uploaded.
Harmony rules
Complementary
Split-complementary
Analogous
Triadic
Rectangle
Square
Monochromatic
Accent and neutrals
What Spectrum Cell can do
Wheel and precise editing
Drag the colours around the wheel and change brightness and saturation. Every colour is edited in RGB, HSB, HSL, LAB, OKLCH or CMYK and typed as HEX, rgb(), hsl() or a name.
Rules and locking
Eight harmony rules, from 3 to 12 colours, locking of single colours and a "Custom" mode for colours set by hand.
Palette from an image
Choose which colours to look for: dominant, vibrant, muted, light or dark. Bright accents are not lost, the points on the picture can be moved and the picture zoomed.
Accessibility
Contrast by WCAG and APCA, colour-blindness simulation and hints on which pairs of colours are fit for text and how to bring them up.
Preview and export
The palette on mockups of a site, a dashboard and a poster, with roles for the colours. Export to CSS, SCSS, Tailwind, JSON, W3C tokens, SVG, PNG and ASE.
Random palette and links
Space gives a new palette, locked colours stay. Undo, favourites and a link that opens the palette anywhere.
When it comes in handy
Brand colours and a design system, the theme of a site or an app in a light and a dark version, colours for charts, shades to match an illustration or a photo. A palette checked for readability in a minute instead of hours of picking by eye.
More than twenty units: lengths, angles, time and resolution. Values are recalculated as you type, and the result can be copied in the unit you need, as a value, a CSS variable or a ready declaration.
Overview
Quickly and accurately convert values between px, rem, em, %, vw, vh and other units to build responsive and accessible layouts. The tool takes the root and parent font sizes, the screen and the parent block into account, so the result matches what the browser will show. Everything is calculated right in the browser: your files are never uploaded.
What Unit Forge can do
Smart converter
Type "24px" right into the field and the result appears at once. There is a history, pinned pairs of units and a visual preview of the size.
Batch conversion
Lists of values and whole CSS declarations. A counter shows how many values were converted, and the "only changed" mode hides the rest.
CSS and SCSS files
Upload files or paste code and choose the properties to process. A before and after comparison highlights every changed value.
Fluid typography
clamp() for a single value, smooth sizes between two screens and a whole scale of steps for headings and text.
From a layout to code
A size from the layout in pixels becomes vw, percentages and clamp() that scale with the width of the screen.
Design system tokens
A table of values with the grid step you need becomes CSS variables, an SCSS map or a JS object in one click.
Context decides
Unlike simple calculators, Unit Forge takes the base (root) font size, the parent element size, the line height and the parent block into account. Percentages are taken of the font, the width or the height depending on the CSS property. Settings, your own presets such as Tailwind or Bootstrap and the history are saved in the browser.
From mockup to code
Move sizes from Figma: enter the width of the layout and get vw and clamp(). Build fluid typography, design system tokens and convert whole CSS files in a single pass.
One logo. Every icon.— Fav Icona
A favicon and social poster generator with full control and preview.
Create a set of icons (favicon.ico, PNG, Apple Touch Icon) for all devices and browsers, and, if you like, a poster for link previews in social networks. Upload an image, adjust it, and get a ready-made package of files plus the HTML code with tags to paste in. Icons come with light and dark themes and separate Apple and Android settings, and the poster can be cropped, compressed to JPEG, PNG or WebP and previewed as a card in Telegram, Facebook and X. It all works right in the browser: your images are never uploaded anywhere.
What is in the set
favicon.ico
PNG
SVG
Apple Touch Icon
Web manifest
Open Graph poster
og and Twitter tags
HTML code
AI agent request
How to get the set
Upload
Choose the icon and, if needed, a poster for social networks.
Adjust
Crop, set the background, the poster format and compression, fill in the tags.
Check
See the icon at different sizes and in different contexts, and the poster as a card in messengers and social networks.
Connect
Download the package and paste the HTML code into your site, or hand the task to an AI agent.
When it comes in handy
Launching a new site or rebranding: a complete favicon set and a good-looking link preview in social networks at once. A recognizable icon and poster help brand recognition.
Your data under control.— Data Lab
Open a file or paste a text, and the data can be viewed, edited, converted between formats, compared, checked and put together from several sources: ten editors in one lab.
Data Lab opens JSON, JSONC, YAML, TOML, CSV, TSV and XML, and also reads JS objects and JSON Lines. The data is seen as source text, as a tree and as a table. You can search it with queries, convert it with a report of what is lost, compare it, check it against a schema, turn it into TypeScript types, add test data, and merge it from several sources. Comments and numbers that a double cannot hold are kept. The steps of a transformation and the mapping of a merge give a ready function in JavaScript, TypeScript and Python. Everything is computed in the browser: files are never sent anywhere.
Formats
JSON
JSONC
YAML
TOML
CSV
TSV
XML
JS objects
JSON Lines
What Data Lab can do
Editor and tree
The source text with highlighting, folding and search next to the data tree. An edit in one is at once seen in the other, and the comments of JSON, JSONC and YAML are kept.
Formats and table
Seven formats are found from the file or the text. A list of objects opens as a table with sorting and filters, and nested values are unfolded into columns.
Search and queries
Search keys and values, JSON Pointer and JSONPath paths, queries in JSONPath and JMESPath with filters and projections, and a jump from a match to its place in the text.
Convert and steps
Conversion between formats with a report on what is lost and whether it can be turned back. A transformation by steps: filters, calculations, grouping, masking, splitting and joining fields, replacements, default values, rows from nested lists. A step works on any object or list inside the document: the places are found in the data. The pipeline is saved to a file and gives the code of a function.
Compare
What was added, removed, changed and moved, with a setting for lists and a tolerance for numbers. The result can be a JSON Patch (RFC 6902), checked to give the second document.
Schemas and types
Checking against JSON Schema, making a schema and Zod from samples. TypeScript types from several samples: optional fields, variants, enums, generic types.
Test data
Users, products and orders, or data by your schema and samples. A seed makes it repeatable, and names and texts come in Russian and English.
Merge
Several sources into one result: as a list, by keys, as an overlay with a report of what was covered, by a join on a key, or by a mapping of fields on a diagram with links, conditions, grouping and summaries. The result can be a JS object and the code of a ready function.
Function code
Data Lab writes a ready function in JavaScript, TypeScript or Python from the steps of a transformation and from the mapping of a merge. The code gives what the editor gives, and in TypeScript the types come from your data. Drop the comments, add a command-line runner, copy or download the file.
Big files and configurations
Parsing runs in a separate thread, files of tens of megabytes open without freezing, and a long task can be stopped. The settings and what you made in the editors are saved to a file and loaded back.
How to use it
Drop a file on the window, paste text from the clipboard or open a sample. Pick an editor for the task: view, change, check or create. The result can be copied, downloaded or sent to another editor. The data stays in the browser: autosave is off until you turn it on.
Strong passwords, no server.— Stronghold
A generator of strong passwords and pass phrases with flexible settings and an honest strength estimate.
Generation and checking run entirely in your browser: passwords and phrases are not sent to a server and not saved anywhere. Only the settings are remembered.
Overview
Create unique, crack-resistant passwords to protect your accounts, as well as memorable pass phrases made of words. Set the length, character sets, your own characters and exclusions, pick a ready preset, and the estimate in bits and the time to crack show the real level of strength. You can also check an existing password and find its weak points.
What Stronghold can do
Passwords and pass phrases
Random passwords of any length or memorable phrases made of English words.
Presets and your own rules
Ready sets: strong, PIN code, Wi-Fi, easy to type. Your own characters, exclusions and a minimum of every kind.
No confusion
Exclude ambiguous characters: "l" and "1", "O" and "0". Handy when a password has to be typed by hand.
An honest estimate
Entropy in bits, the strength level and the time to crack are recalculated at once and take all your limits into account.
Password check
Paste your own password: it is rated right in the browser, and repeats, sequences, years and dictionary words are highlighted.
Convenient to use
Hide the passwords, refresh one or all, copy or download as TXT, CSV and JSON. The R hotkey refreshes them all.
What for
Master passwords for password managers, passwords for new accounts, API keys and other cases where security matters. The focus is on flexible settings and clear visual feedback — so the password is both strong and easy to remember.
