Every tool
designers
actually use.

Aa

Aa

7.4 : 1 · AA ✓ AAA ✓

Contrast Checker

Test color pairs for WCAG AA and AAA compliance. Live preview with quick combination grid.

↗

Normal

Deuteranopia

Color Blindness Simulator

Preview designs through 7 types of color vision deficiency. Upload any image and compare side by side.

↗

21:1 AAA

9.7 AAA

5.2 AA

21:1 AAA

8.1 AAA

4.6 AA

Accessible Color Finder

Pick any background — instantly see every foreground color that passes WCAG AA or AAA. Click to preview.

↗

Image Color Extractor

Upload any image and extract its dominant colors. Click the image to pick any pixel. Copy HEX or CSS variables.

↗

Color Palette Generator

Generate harmonious palettes from any base color. Complementary, triadic, analogous. Export CSS, Tailwind, HEX.

↗

+

Color Mixer

Blend two colors across gradient steps. Copy every HEX code or the full CSS gradient in one click.

↗

CSS Gradient Generator

Build linear, radial and conic gradients visually. Multiple color stops, angle control, copy CSS instantly.

↗

SVG Wave Generator

Generate layered SVG waves for website sections. Animated, multi-layer, customizable colors. Copy SVG or CSS.

↗

#f97316

oklch(70%)

Color Picker

Pick any color — HEX, RGB, HSL, OKLCH with harmony suggestions and 20-color history.

↗

Glassmorphism Generator

Design glass morphism effects visually. Adjust blur, opacity, border and tint — copy the CSS in one click.

↗

Neumorphism Generator

Create soft UI neumorphic effects. Choose background color, size and depth — get the CSS instantly.

↗

Box Shadow Generator

Build multi-layer CSS box shadows with live sliders. Offset, blur, spread, color, opacity. Copy CSS instantly.

↗

Glow

Text Shadow Generator

Build CSS text-shadow effects visually. Glows, 3D, neon, long shadows. Stack multiple layers, copy CSS.

↗

Gradient

Gradient Text Generator

Create CSS gradient text with background-clip. Presets, custom color stops, animated gradient option. Copy CSS instantly.

↗

Solid Outline Gradient

CSS Button Generator

Generate CSS button styles with hover effects. Solid, outline, gradient, neon, glass, 3D. Tweak padding and radius, copy CSS.

↗

CSS Loader Generator

Pure CSS spinners and loading animations. Spinner, dots, bars, pulse, ring, wave and more. No JavaScript needed.

↗

Hover me

This is a tooltip

.tooltip-wrap:hover
.tooltip { opacity: 1 }
::after { border: 5px }

CSS Tooltip Generator

Build pure CSS tooltips with no JavaScript. Customize position, color, arrow, animation and size — copy the ready-to-use code.

↗

width: 0
height: 0
border-left: 28px
border-bottom: 44px
clip-path: polygon()

CSS Triangle Generator

Generate pure CSS triangles — no images, no SVG. Border trick or clip-path, 8 directions, custom size and color.

↗

@keyframes float {
  0%,100%{ translateY(0) }
  50%{ translateY(-16px) }
}

CSS Animation Generator

Build CSS @keyframes animations visually — 20+ presets across 4 categories. Customize timing, easing and iteration count. Copy the CSS instantly.

↗

Design

Card

Pure CSS component

background
box-shadow
border-radius
:hover { lift }

CSS Card Generator

Design card components visually — background, shadow, border, glassmorphism and hover effects. Copy the complete CSS instantly.

↗

div

::before {
  inset: -2px;
  background: linear-...
  z-index: -1;
}

CSS Gradient Border

Generate gradient borders with no images — background-clip trick (supports border-radius) or border-image. 8 presets, custom stops, copy CSS instantly.

↗

dots

grid

stripes

checker

CSS Pattern Generator

Create CSS background patterns with no images — dots, grid, stripes, chevrons, checkerboard. Pure CSS gradients, zero HTTP requests.

↗

CSS Input Styler

Style text inputs with custom borders, backgrounds, focus states and placeholder colors. 6 presets, copy CSS instantly.

↗

appearance: none;
background-image:
 url("data:image/...");
:focus-visible { }

CSS Checkbox & Radio

Pure CSS custom checkboxes and radio buttons — no JS, no images. Customize size, colors, radius and focus ring. Copy CSS and HTML.

↗

60%

CSS Progress Bar Generator

Customize loading bars with gradient fills, stripes, glow and indeterminate animations. Copy CSS and accessible HTML in one click.

↗

Select option…

Figma

CSS Select Styler

Style native HTML select dropdowns with custom CSS. Control colors, borders, arrows and focus states. Copy CSS and HTML instantly.

↗

OFF

ON

CSS Toggle Switch

Design custom on/off toggle switches with pure CSS. Control size, colors, knob shape and transition. No JavaScript — pure CSS checkbox hack.

↗

1

2

3

CSS Scroll Snap Generator

Build scroll snap containers — type, alignment, padding, overscroll. Interactive live demo with slides, copy CSS for container and children.

↗

CSS Skeleton Loader

Build skeleton loading placeholders — card, profile, article and list layouts. Shimmer or pulse animation. Copy CSS and HTML instantly.

↗

Lift

Glow

Underline →

CSS Hover Effects

24 hover effects for buttons, cards and links. Lift, glow, slide fill, shimmer, tilt, neon — click to preview, copy CSS instantly.

↗

Glass Panel

backdrop-filter: blur(12px)

CSS Backdrop Filter

Build glassmorphism panels with backdrop-filter. Blur, brightness, contrast, saturation — live preview, copy CSS instantly.

↗

element

CSS Transform Generator

Combine translate, rotate, scale and skew visually. Live preview with grid, copy the CSS transform property instantly.

↗

👆pointer

✥move

✊grab

🎯cross

⏳wait

🔍zoom-in

⛔no-drop

↔ew-resize

CSS Cursor Generator

Preview all 30+ CSS cursor keywords live. Hover to see each cursor in action, click to copy the CSS rule instantly.

↗

Button

CSS Outline Generator

Build accessible focus rings and decorative outlines. Width, style, color, offset — with live preview on real UI elements.

↗

CSS Range Input Styler

Style the notoriously tricky HTML range slider. Custom thumb, track, fill color and focus ring — works in Chrome, Firefox and Safari.

↗

1

IDs

-

2

Class

-

1

Elem

#nav .item:hover span

CSS Specificity Calculator New

Visual (A, B, C) specificity score for any CSS selector — compare selectors, see which wins.

↗

CSS

CSS @keyframes Editor New

Build CSS animations visually — timeline editor, 8 presets, edit per keyframe stop, live preview.

↗

#7C6DFA rgb(124,109,250) hsl(246,93%,70%) oklch(62% .18 281)

Color Converter

Instantly convert between HEX, RGB, HSL, HSV and OKLCH. Paste any format, get all outputs plus color harmonies.

↗

Tint & Shade Generator

Generate color scales from any base color. Export as CSS variables, HEX list or Tailwind config.

↗

Color Harmony Generator

Build palettes using color theory. Complementary, triadic, analogous, split-complementary and more.

↗

repeat(auto-fit, minmax(…, 1fr))

CSS Grid Auto-Fit / Auto-Fill

See the difference between auto-fit and auto-fill. Configure minmax values, item count and gap. Side-by-side live demo, copy CSS.

↗

parent

absolute

CSS Position Generator

Visual CSS positioning — relative, absolute, fixed, sticky. Drag offsets, set z-index. Interactive demo + copy CSS.

↗

header

main

aside

footer

CSS Grid Generator

Build grid layouts visually. Drag cells to define template areas, set column and row sizes. Copy CSS instantly.

↗

grow: 2

grow: 1

grow: 1

Flexbox Generator

Build flexbox layouts visually. Set direction, alignment and spacing, customize individual items. Copy CSS instantly.

↗

ease-out 400ms

CSS Transition Generator

Build CSS transitions with a visual cubic-bezier editor. Set property, duration, delay and easing. Copy CSS instantly.

↗

375px

1440px

clamp(1rem, 2vw + 0.5rem, 2rem)

CSS Clamp() Calculator

Generate fluid clamp() values for typography and spacing. Scale from min to max across any viewport range — no media queries.

↗

16:9

4:3

1:1

aspect-ratio: 16 / 9

Aspect Ratio Calculator

Calculate width and height from any ratio. Get the CSS aspect-ratio property, legacy padding-top hack, and common dimensions.

↗

:root {
  --color-primary: #f97316;
  --space-md: 1rem;
  --text-lg: 1.125rem;
}

CSS Variables Generator

Build a complete CSS custom properties system — colors, spacing, typography and shadows. Copy the :root block for your design system.

↗

:root {
  --color-accent: #f97316;
  --space-4: 16px;
  --text-lg: 1.125rem;
  --shadow-md: 0 4px 16px …;
}

CSS Custom Properties Generator

Build design token systems with CSS custom properties. Add color, spacing, typography and shadow variables in groups. Export a ready-to-use :root block.

↗

content

margin padding

CSS Spacing Generator

Visual padding and margin builder — set all four sides, pick units (px/rem/em/%), copy shorthand or longhand CSS.

↗

16px → 1rem

24px → 1.67vw

CSS Units Converter

Convert between px, rem, em, vw, vh, pt, cm and more. Set base font size and viewport dimensions. Quick reference scale table included.

↗

@media screen and
  (min-width: 768px)

CSS Media Query Builder

Build responsive media queries — min/max-width, orientation, prefers-color-scheme, reduced motion, HiDPI and more. Click presets or custom.

↗

Border Radius Generator

Control all four corners independently. Round, pill, blob shapes — copy CSS with one click.

↗

◑

◑

CSS Filter Generator

Adjust brightness, contrast, saturation, hue-rotate, blur and more. Live preview, copy CSS filter string.

↗

mix-blend-mode: screen

CSS Blend Mode Generator

Preview all 16 CSS blend modes for mix-blend-mode and background-blend-mode. Live tile grid, custom colors, copy CSS.

↗

Aa Typography

size · weight · spacing

CSS Typography Playground

Design your type — font family (40+ Google Fonts), size, weight, line height, letter spacing. Click text to edit. Copy CSS.

↗

Display

Heading

Body text sample here

Font Scale Generator

Build typographic scales with perfect ratios. Choose any Google Font, copy CSS custom properties.

↗

CSS Mask Generator

Fade edges with linear/radial gradient masks. Configure mask-image, size, repeat. 8 presets, live preview on image or text.

↗

CSS Clip-Path Generator

Create polygon, circle and ellipse clip-path shapes visually. Drag points, use presets, copy CSS instantly.

↗

Heading

S U B T I T L E

Body text with comfortable
line-height and spacing

Letter Spacing Generator

Fine-tune letter spacing, line height and font size. Preview any Google Font, copy CSS instantly.

↗

::-webkit-scrollbar
::-webkit-scrollbar-track
::-webkit-scrollbar-thumb
scrollbar-width: thin

CSS Scrollbar Generator

Customize browser scrollbars with CSS. Adjust width, colors, border radius and hover state. Webkit + Firefox output.

↗

NEON

GLOW

CSS Neon Text Generator

Realistic neon glow with CSS text-shadow. Choose color, intensity, spread and add flicker or pulse animation.

↗

STROKE

HOLLOW

CSS Text Stroke Generator

Outlined, hollow and gradient text with -webkit-text-stroke. 6 presets, switchable backgrounds, copy CSS instantly.

↗

Wavy underline

Dashed link style

Strikethrough text

CSS Text Decoration Generator

Design custom underlines, overlines and strikethroughs. Color, style (wavy/dashed/dotted), thickness and offset.

↗

{
  "name": "ToolFlow",
  "tools": 86,
  "free": true
}

JSON Formatter

Format, validate and minify JSON. Beautify messy JSON, check for errors. Copy clean output instantly.

↗

/([a-z]+)\d+/g

test string: alphaalpha123 beta456 end

2 matches found

Regex Tester

Test regular expressions with real-time match highlighting, capture groups, flags, and a full cheat sheet.

↗

Plain text →

VG9vbEZsb3cgaXMgYXdlc29tZQ==

← Base64 decoded

ToolFlow is awesome

Base64 Encoder & Decoder

Encode text or files to Base64, or decode Base64 strings instantly. Supports data URIs for images. Runs in browser.

↗

K#9mX$vQ2@nL

Strong

Password Generator

Generate secure passwords with custom length, uppercase, lowercase, numbers and symbols.

↗

248

Words

1.2k

Chars

~1m

Read

Word Counter

Count words, characters, sentences and paragraphs. See estimated reading time and character frequency.

↗

1 km → 0.621 mi

100°C → 212°F

1 kg → 2.205 lb

Unit Converter

Convert length, weight, temperature, speed, area and more. Instant results with all common units.

↗

toolflow.app

Free CSS Tools — No Login Required

86 free generators and utilities...

Google · Twitter · Facebook preview

Meta Tag Previewer

Preview Google snippet, Twitter card and Facebook OG side by side. Generate copy-ready HTML meta tags.

↗

TF

TF

TF

16px · 32px · 512px

Favicon Generator New

Create favicons from text or emoji. Download PNG in all sizes (16–512px). Copy HTML link tags instantly.

↗

28

Years

7

Months

14

Days

Age Calculator

Calculate your exact age in years, months, weeks and days. Find out how many days until your next birthday.

↗

22.4

Normal weight

BMI Calculator

Calculate your BMI instantly. Supports metric and imperial units. See your BMI category and healthy weight range.

↗

Income · Housing · Food · Other

Budget Planner

Plan your monthly budget. Track income and expenses, see a visual breakdown of where your money goes.

↗

2,340

kcal / day (TDEE)

Protein 30% Carbs 45% Fat 25%

Calorie Calculator

Calculate your daily calorie needs (TDEE) based on age, weight, height and activity level.

↗

Until New Year

89

days

:

14

hrs

:

32

min

Countdown Timer

Count down to any date — birthday, holiday, exam or event. Days, hours, minutes and seconds.

↗

25:00

Focus · Break · Repeat

Focus Timer

Pomodoro focus timer. Customize work and break intervals, track your sessions and stay productive.

↗

3.72

GPA — 4.0 scale

Dean's List ✓

GPA Calculator

Calculate your GPA instantly. Add courses, grades and credit hours. Cumulative and semester GPA.

↗

INVOICE #0042 2026-09-23

Design work€ 1,200

Development€ 800

Total€ 2,000

Invoice Generator

Create and download professional invoices as PDF. Add line items, taxes and your branding.

↗

€ 385

/ month

4.5%

interest

Loan Calculator

Calculate monthly loan payments, total interest and amortization schedule. Supports any loan type.

↗

✓ Passport

✓ Charger

☐ Sunscreen

☐ Camera

Summer trip packing list

Packing List Generator

Smart packing lists for any trip type — summer, winter, camping, city. Check off items as you pack.

↗

20% of 350 =

70

% change · % of total · tip

Percentage Calculator

Calculate percentages, percentage change, what percentage X is of Y. Tip calculator included.

↗

→ UPPER CASE

→ lower case

→ camelCase

→ kebab-case

Text Case Converter

Convert text between UPPER, lower, Title, camelCase, kebab-case, snake_case and more instantly.

↗

09:00

New York

→

15:00

Berlin

→

22:00

Tokyo

Timezone Converter

Convert times across multiple timezones simultaneously. Find overlap times for global team meetings.

↗

Bill

€ 64

Tip 15%

€ 9.60

Each (4)

€ 18.40

Tip Calculator

Calculate tips instantly and split the bill between any number of people. Choose custom tip percentage.

↗