Xerobit
Category 4 of 7

Frontend & Design Tools

Visual CSS generators and frontend utilities. Favicon package generator, Flexbox playground, CSS Grid builder, box-shadow composer. Click-and-copy. Zero friction from idea to CSS.

14 free tools No signupRuns 100% in your browser

WebP to JPG Converter

Convert WebP to JPG, PNG or WebP in your browser. Batch files, set quality, pick a background for transparency. Nothing is uploaded.

webp to jpgFrontend & Design

Image Compressor

Compress JPEG, PNG, and WebP images in your browser. Adjustable quality, batch mode. Files never leave your device.

image compressorFrontend & Design

Color Picker

Pick colors, convert hex/RGB/HSL/OKLCH, and check WCAG contrast.

hex color pickerFrontend & Design

SVG to PNG Converter

Convert SVG to PNG, JPEG or WebP at any size, 1× to 8× or exact pixels. Transparent or solid background. Batch files, all in your browser.

svg to pngFrontend & Design

Random Color Generator

Generate one or more random colors with HEX, RGB and HSL values for design palettes and development.

random color generatorFrontend & Design

Aspect Ratio Calculator

Calculate aspect ratios (16:9, 4:3, 21:9, etc.). Given W:H and one dimension, get the other. Responsive padding-top % for CSS aspect-ratio containers.

aspect ratio calculatorFrontend & Design

Favicon Generator

Generate favicon package from any image or emoji. Multiple sizes (16, 32, 48, 180, 192, 512), manifest.json, and HTML snippet.

favicon generatorFrontend & Design

Color Converter (HEX/RGB/HSL/CMYK)

Convert colors between HEX, RGB, RGBA, HSL and CMYK formats instantly by entering any valid color code.

hex to rgbFrontend & Design

Pixel to REM Converter

Convert px to rem, em, and percent, and vice versa. Configurable root font size. Bulk conversion mode for entire stylesheets.

px to remFrontend & Design

RGB to CMYK Converter

Convert RGB screen colors to CMYK print percentages for accurate color reproduction.

rgb to cmykFrontend & Design

Flexbox Generator

Visual CSS Flexbox playground. Live preview + copyable CSS. Control direction, wrap, justify, align, gap. Example child layouts.

flexbox generatorFrontend & Design

CSS Grid Generator

Visual CSS Grid layout builder. Configure columns, rows, gaps, and named areas. Live preview with copyable CSS output.

css grid generatorFrontend & Design

HTML / CSS / JS Minifier

Minify HTML, CSS, or JavaScript. Strips whitespace, comments, and unnecessary characters. Shows size reduction percentage.

html minifierFrontend & Design

Box Shadow Generator

Visual CSS box-shadow builder. Control offset, blur, spread, color, inset. Multi-layer shadows. Live preview + copyable CSS.

box shadow generatorFrontend & Design

Why a visual generator beats hand-writing CSS

For most CSS, color, spacing, typography, writing it by hand is faster than any UI. But for a handful of properties, a visual generator is genuinely faster: properties with 3+ axes of variation (box-shadow has 5), properties with unintuitive math (flex-basis + flex-grow + flex-shrink), and properties whose output you need to see before committing (favicons, gradients).

The tools in this pillar are designed for that specific case, where trial and error beats writing code blind.

All 14 tools in this category

  • WebP to JPG Converter: Convert WebP to JPG, PNG or WebP in your browser. Batch files, set quality, pick a background for transparency. Nothing is uploaded.
  • Image Compressor: Compress JPEG, PNG, and WebP images in your browser. Adjustable quality, batch mode. Files never leave your device.
  • Color Picker: Pick colors, convert hex/RGB/HSL/OKLCH, and check WCAG contrast.
  • SVG to PNG Converter: Convert SVG to PNG, JPEG or WebP at any size, 1× to 8× or exact pixels. Transparent or solid background. Batch files, all in your browser.
  • Random Color Generator: Generate one or more random colors with HEX, RGB and HSL values for design palettes and development.
  • Aspect Ratio Calculator: Calculate aspect ratios (16:9, 4:3, 21:9, etc.). Given W:H and one dimension, get the other. Responsive padding-top % for CSS aspect-ratio containers.
  • Favicon Generator: Generate favicon package from any image or emoji. Multiple sizes (16, 32, 48, 180, 192, 512), manifest.json, and HTML snippet.
  • Color Converter (HEX/RGB/HSL/CMYK): Convert colors between HEX, RGB, RGBA, HSL and CMYK formats instantly by entering any valid color code.
  • Pixel to REM Converter: Convert px to rem, em, and percent, and vice versa. Configurable root font size. Bulk conversion mode for entire stylesheets.
  • RGB to CMYK Converter: Convert RGB screen colors to CMYK print percentages for accurate color reproduction.
  • Flexbox Generator: Visual CSS Flexbox playground. Live preview + copyable CSS. Control direction, wrap, justify, align, gap. Example child layouts.
  • CSS Grid Generator: Visual CSS Grid layout builder. Configure columns, rows, gaps, and named areas. Live preview with copyable CSS output.
  • HTML / CSS / JS Minifier: Minify HTML, CSS, or JavaScript. Strips whitespace, comments, and unnecessary characters. Shows size reduction percentage.
  • Box Shadow Generator: Visual CSS box-shadow builder. Control offset, blur, spread, color, inset. Multi-layer shadows. Live preview + copyable CSS.

Other categories

  • Data & Format: JSON, XML, YAML, CSV, SQL, HTML and Markdown: format, view, convert and diff.
  • Encoding & Crypto: Base64, URL, JWT, hashes, UUID, binary, QR codes and passwords.
  • Dev Productivity: Regex, cron, timestamps, subnets, validators and everyday developer utilities.
  • Text Tools: Counters, case converters, cleaners, formatters and everyday text utilities.
  • Fonts & Symbols: Fancy text, text effects, copy and paste symbols, emoticons and special characters.
  • Name Generators: Names for people, pets, bands, teams, businesses, characters and usernames.
  • Random & Games: Random pickers, dice, coin flips, wheels, party games and test data generators.
  • Math Calculators: Algebra, fractions, factors, exponents, logarithms and everyday arithmetic.
  • Geometry: Area, perimeter, volume and surface area of shapes, plus triangles and coordinates.
  • Statistics & Probability: Averages, deviation, distributions, hypothesis tests, probability and combinatorics.
  • Finance: Loans, interest, investing, margins, taxes, salary and business calculators.
  • Health & Fitness: BMI, calories, macros, heart rate, hydration and training calculators.
  • Date & Time: Dates, durations, ages, business days, calendars and time arithmetic.
  • Science & Engineering: Physics, chemistry and electrical formulas with the working shown.
  • Construction & DIY: Concrete, paint, flooring, roofing, lumber and home improvement estimators.
  • Education & Grades: Grade, GPA and exam calculators and study helpers.
  • Length & Distance: Convert meters, feet, inches, miles, kilometers and every other length unit.
  • Weight & Volume: Convert kilograms, pounds, ounces, liters, gallons, cups and cooking measures.
  • Temperature, Speed & Data: Temperature, speed, pressure, energy, power and digital storage converters.