UI Tools
CSS generators for Flexbox, Grid, gradients, shadows, buttons plus colour tools and SVG generators
All 12 UI and CSS tools run entirely in your browser — no install, no account, no uploads. Pick and convert colours, generate CSS for shadows, gradients and glassmorphism, design buttons and clip-path shapes with visual editors, check WCAG contrast ratios, browse 160 000+ icons and prototype ideas in live HTML/CSS/JS playgrounds.
12 tools
HTML Playground
Live HTML/CSS/JS editor with instant browser preview — prototype and test HTML snippets in seconds
CSS Playground
Live CSS editor with separate HTML and CSS panes and instant browser preview
JavaScript Playground
Run JavaScript online in a sandboxed editor with live console output — supports ES2022+ and intercepts alert()
SVG Icon Studio
Browse 160k+ icons from 73 packs, import SVG from any source, draw shapes from scratch and export pixel-perfect icons
Color Converter
Convert colors between HEX, RGB, HSL, CMYK and more
CSS Unit Converter
Convert between CSS units: px, rem, em, vw, vh and more
Color Palette Generator
Generate harmonious color palettes from a base color
CSS Generators
Generate text shadow, CSS filters, transforms, glassmorphism, triangles, gradient text and custom scrollbars
SVG Generators
Generate SVG waves, blobs, background patterns and convert SVGs to data URIs
Color Contrast Checker
Check WCAG AA and AAA color contrast ratios with live text preview
Button Designer
Design pixel-perfect CSS buttons with live preview — background, border, shadow, gradient, hover state and complete CSS export
CSS Clip-path Generator
Design CSS clip-path polygon shapes visually — drag control points on a canvas, choose from presets and copy the clip-path CSS.
All categoriesOther categories
About UI Tools
A complete front-end toolkit for designers and developers. Generate CSS, work with colour, prototype UI components and explore SVG — all 12 tools run client-side with instant feedback and one-click copy of generated code.
Features
- ✓HTML Playground — live HTML/CSS/JS editor with instant in-browser preview; prototype and share snippets with a URL
- ✓CSS Playground — separate HTML and CSS panes with real-time preview for rapid CSS iteration
- ✓JavaScript Playground — sandboxed JS editor with live console output; supports ES2022+ and intercepts alert()
- ✓SVG Icon Studio — browse and search 160 000+ icons from 73 packs (Lucide, Heroicons, Phosphor, Bootstrap and more), import custom SVG and export as PNG, SVG or React component
- ✓Color Converter — convert between HEX, RGB, HSL, HSV, OKLCH and CMYK with live swatches and clipboard copy
- ✓CSS Unit Converter — convert between px, rem, em, vw, vh, pt and more with configurable base font size
- ✓Color Palette Generator — create harmonious 5–10 colour palettes (complementary, analogous, triadic) from any base colour; export as CSS variables or JSON
- ✓CSS Generators — one-stop generator for text-shadow, box-shadow, CSS filters, border-radius, transforms, glassmorphism, gradient text, CSS triangles and custom scrollbars
- ✓SVG Generators — generate SVG waves, blobs and background patterns; convert inline SVG to data URIs for CSS backgrounds
- ✓Color Contrast Checker — check WCAG 2.1 AA (4.5 : 1) and AAA (7 : 1) contrast ratios with live text preview and pass/fail badges
- ✓Button Designer — design pixel-perfect CSS buttons with live preview — background, border, shadow, gradient, hover state and full CSS export
- ✓CSS Clip-path Generator — drag control points on a canvas to build polygon, circle and ellipse clip-path shapes; choose from presets and copy the CSS
- ✓Every tool outputs copy-ready, vendor-prefix-free CSS that works in all modern browsers
Common Use Cases
- Check that a text/background colour combination passes WCAG AA before shipping a component
- Pick a brand colour and generate a full accessible colour palette with CSS variable export
- Design a primary CTA button with gradient background and hover lift — copy the complete CSS
- Generate a glassmorphism card style with backdrop-filter and copy the CSS in seconds
- Create an SVG wave divider for a hero section without writing SVG by hand
- Find and export a Lucide or Phosphor icon as an optimised SVG for a React component
- Convert design-tool pixel values to rem for a scalable, accessible CSS stylesheet
- Prototype a landing page layout in the HTML/CSS playground without a local dev environment
- Create a CSS clip-path diagonal cut on a hero image without hand-coding the coordinates
- Convert a hex colour received from a designer into HSL for a CSS custom property
Frequently Asked Questions
QDoes anything get uploaded to a server?
No. All tools run entirely in your browser using JavaScript and CSS. Nothing you type, paste or generate is transmitted to any server.
QWhat does the Color Contrast Checker do?
It computes the WCAG 2.1 contrast ratio between a foreground and background colour and reports whether the combination passes Level AA (4.5 : 1 normal text, 3 : 1 large text) and Level AAA (7 : 1) accessibility standards.
QWhat icon libraries are included in SVG Icon Studio?
The studio bundles 160 000+ icons from 73 packs including Lucide, Heroicons, Phosphor, Bootstrap Icons, Tabler, Feather, Remix, Material Symbols and more. All icons are MIT or Apache 2.0 licensed.
QCan I share a playground with a colleague?
Yes. The HTML, CSS and JavaScript playgrounds encode the editor state in the URL so you can copy and share a link directly — no account or backend required.
QCan I use the generated CSS directly in production?
Yes. All output uses standard properties with no unnecessary vendor prefixes. The code is plain CSS that works in all modern browsers (Chrome, Firefox, Safari, Edge).
See Also
- Button DesignerDesign CSS buttons visually with gradient and hover export
- CSS GeneratorsShadows, glassmorphism, gradients, triangles and more
- WCAG Contrast CheckerCheck AA and AAA contrast ratios for accessible colour pairs
- Color Palette GeneratorComplementary, triadic and analogous colour schemes
- Color ConverterConvert between HEX, RGB, HSL, HSV, OKLCH and CMYK
- SVG Icon StudioBrowse 160 000+ icons from 73 packs and export as SVG
- SVG GeneratorsWaves, blobs, background patterns and SVG data URIs
- Clip-Path GeneratorVisual clip-path polygon, circle and ellipse builder
- HTML PlaygroundLive HTML/CSS/JS editor with instant browser preview
- CSS Unit ConverterConvert px, rem, em, vw, vh, pt, cm and mm
- Code FormattersFormat and beautify CSS, HTML, JavaScript and more