Frontend, CSS and design

Visually compose grid-template-columns, rows, and named areas. Click cells to paint regions and copy minimal CSS plus matching Tailwind utility classes.

Generators

Experiment with CSS Flexbox and Grid layouts using visual controls, a live preview and per-item settings, then copy the generated CSS.

Generators

Edit CSS @container breakpoints, resize the parent by slider or drag handle to watch a component reflow, and copy the named-container CSS.

Developer utilities

Convert vanilla CSS to Tailwind CSS utility classes with property mapping and spacing scale conversion

Converters

Convert CSS declarations to Tailwind utility classes, each labeled exact, approximate or arbitrary value, and copy them as a class string or JSX.

Converters

Search and browse Tailwind CSS utility classes by category, see the CSS behind each one with a live preview, and copy class names.

Developer utilities

Build a Tailwind v4 @theme block of color, spacing, font, breakpoint and container tokens, with dark color values by media query or .dark class.

Generators

Create linear, radial and conic CSS gradients with multiple color stops, angle and shape controls and presets, then copy the CSS.

Generators

Create layered CSS box shadows with sliders for offset, blur, spread, color, opacity and inset, start from presets, and copy the CSS.

Generators

Build and preview CSS text-shadow effects interactively. Stack multiple shadow layers, use presets like neon or retro, and copy the ready-to-use CSS.

Generators

Build a CSS @keyframes animation from bounce, fade, slide, pulse or shake presets, set duration, delay, easing and fill mode, and copy the CSS.

Generators

Edit a CSS cubic-bezier() easing curve by dragging control points or typing values, start from presets like ease-in-out or back, and preview it.

Generators

Generate a CSS clamp() value for fluid typography or spacing from min and max sizes and a viewport range, with a live preview that scales.

Generators

Convert between CSS units: px, rem, em, vw, vh, %, and pt. Bidirectional with configurable base font size and viewport dimensions.

Converters

Calculate and visualize CSS selector specificity. Paste selectors to see specificity scores, compare multiple selectors, and understand which styles win.

Developer utilities

Preview fade, slide, scale, morph and flip View Transitions on a live element and copy the HTML, CSS and JS with the cross-document @view-transition.

Developer utilities

Convert colors between HEX, RGB, HSL, HSV, CMYK, and Tailwind CSS with contrast checker

Converters

Generate color palettes from a base color with six harmony rules, lock colors, check contrast, and export CSS, SCSS, Tailwind or JSON.

Generators

Check the WCAG 2.1 contrast ratio between a text and background color in hex, rgb() or hsl(), with AA and AAA results for normal and large text.

Developer utilities

Edit SVG path d attributes on a canvas with draggable points, and reverse, mirror, scale, round or convert paths to absolute commands.

Generators

Convert an SVG into a React component with camelCased attributes, className, style objects, optional TypeScript props, prop spread and currentColor.

Converters

Convert HTML to JSX with automatic attribute renaming, style objects, self-closing tags, and comment conversion

Converters

Generate favicons from text or emoji in all standard sizes with HTML and PWA manifest snippets

Generators

Generate placeholder images at any width and height with custom colors, label and font size, as a PNG download, data URL or img tag.

Generators

Test getByRole, getByText, getByLabel, getByPlaceholder, CSS or XPath Playwright locators on pasted HTML, with match count and a stability score.

Developer utilities

Simplify a width and height to an aspect ratio, scale dimensions with a ratio lock, and copy the CSS aspect-ratio value, with common presets.

Developer utilities

Minify or beautify CSS with size reduction stats and comment removal options

Formatters

Minify JavaScript by stripping comments and whitespace, or beautify it with 2-space, 4-space or tab indentation, and see the size saved.

Formatters