Design Tools

Check foreground and background colour contrast against WCAG thresholds, with the rules for text size, UI components and states.

Calculate aspect ratios and resize dimensions proportionally. Supports all common ratios (16:9, 4:3, 1:1, etc.) with visual preview.

Create custom CSS border radius values with a live preview. Adjust each corner individually.

Create organic shapes using advanced border-radius values.

Design CSS box shadows visually with adjustable offset, blur, spread, and color. Copy ready-to-use CSS.

Generate CSS for button states (hover, active, disabled) from a single base color.

Visually create complex shapes using CSS clip-path.

Simulate how a design appears to people with the common types of colour vision deficiency, and fix what the simulation reveals.

Calculate contrast ratios between foreground and background colors to ensure accessibility compliance (WCAG AA/AAA).

Convert colours between HEX, RGB, HSL, HWB and OKLCH, with alpha support. Runs in your browser and shows the live swatch for each format.

Generate colour harmonies from a base colour using perceptual hue rotation, with contrast checked against white and black and a note on where each scheme actually works.

Mix and blend two colors at any ratio to create a new color, with the resulting HEX, RGB and a live preview. Great for gradients and design systems. Free, private.

Generate colour palettes from a base colour using harmony rules, with accessibility contrast checks built in. Runs in your browser.

Pick a colour and get it in HEX, RGB, HSL, HSV, CMYK and OKLCH at once, with WCAG contrast against white and black and generated tints, shades and harmonies.

Generate a full palette of tints (lighter) and shades (darker) from any base color. Click any swatch to copy its HEX. Perfect for design systems. Free & private.

Convert a colour temperature in kelvin to its RGB value and back, with the common lighting references, the white balance a photograph needs, and the CSS for a warm display filter.

Take a colour that fails contrast and find the nearest passing version, adjusting lightness in OKLCH so the hue and chroma stay as close to the original as possible.

Build 3D transforms with live preview, generate the perspective and transform-style declarations a card flip needs, and see why transform order changes the result.

Generate CSS keyframe animations with 12 presets including bounce, fade, slide, rotate, and more. Live preview with customizable timing.

Generate a responsive CSS clamp() value for fluid typography and spacing that scales smoothly between a minimum and maximum viewport width. Free, private, instant.

Generate container queries with the container-type and container-name declarations, breakpoints in container query units, and the fallback structure for browsers that need one.

Generate a CSS filter string from blur/brightness/contrast/saturate/hue-rotate values.

Generate beautiful glassmorphism CSS effects with live preview. Adjust blur, opacity, border radius, shadow, and background gradient.

Build CSS linear, radial and conic gradients visually, and avoid the grey dead zone that ruins most of them.

Create beautiful linear and radial gradients and generate ready-to-use CSS code.

Create eye-catching CSS gradient text with custom colors, angle and font size using background-clip. Live preview and copy-ready CSS. Free and private.

Design complex CSS Grid layouts visually.

Generate line-clamp CSS to truncate text after a set number of lines, with the single-line variant, the height reserved by the clamp and the accessibility caveats that apply.

Generate pure-CSS loading spinners and animations with customizable size, color, thickness and speed. Live preview and copy-ready CSS + HTML. No images, no JS.

Convert margin-left, padding-top, width and the rest into logical equivalents that follow the writing direction, so a layout works in right-to-left languages without a separate stylesheet.

Generate CSS mask declarations for fade-out edges, scroll fades, shaped reveals and gradient wipes, with the prefixed fallback and an explanation of why opacity is not a substitute.

Generate trendy mesh-like CSS backgrounds using layered radial gradients.

Generate multi-column CSS with column count or width, gaps, rules and span, and see which of the known limitations apply to your case before committing to it.

Convert between native nested CSS and flat rules, showing the selector each nesting level actually produces and warning where nesting depth is building specificity nobody intended.

Generate scroll snap CSS for carousels and galleries, with the container and item declarations, padding for partial peek, and the scroll-margin needed to stop headers covering anchors.

Generate scrollbar styling using both the standard scrollbar-color and scrollbar-width properties and the WebKit pseudo-elements, with a contrast check on the thumb.

Build CSS box-shadow values visually, with the offset, blur, spread and layering that make a shadow look real.

Generate subgrid CSS so nested elements align to the parent grid tracks, solving the ragged card problem without fixed heights or JavaScript measurement.

Generate CSS outlined text using -webkit-text-stroke with custom stroke width, stroke color and fill color, plus a live preview and copy-ready CSS. Free, private.

Generate code for pure CSS triangles using transparency hacks.

Create custom CSS cubic-bezier() easing curves with a visual graph and live animation preview. Includes common presets. Copy the timing function instantly.

Generate a dark theme from a light palette by inverting lightness in OKLCH rather than the colour itself, with elevation surfaces, contrast checks and the CSS custom properties for both themes.

Preview designs in dark and light modes.

Generate design tokens as CSS variables, JSON or platform formats, structured in the layers that make them maintainable.

Generate a duotone effect that maps image shadows and highlights to two chosen colours, using CSS filters and blend modes with no image editing, plus the SVG filter version.

Build CSS Flexbox layouts visually. Adjust direction, alignment, wrapping, and gap then copy the CSS code.

Learn and generate CSS Flexbox code visually.

Generate a focus indicator that meets the contrast and thickness requirements, works on light and dark backgrounds, and appears only for keyboard users through focus-visible.

Discover beautiful Google Font combinations for your projects.

Preview and select harmonious font combinations for headers and body text.

Split a width by the golden ratio, the rule of thirds and other classical proportions, and see the modular scale each produces for type and spacing.

Compare the same gradient interpolated in sRGB, OKLCH and HSL side by side, and see why blue to yellow passes through grey in the default space and how to fix it.

Generate a hero section HTML snippet (centered/split/minimal) from headline, subheadline, and CTA.

Minify and clean up SVG code by removing comments, empty tags, and rounding numbers.

Calculate line heights that land on a baseline grid, check them against readability guidance for the measure, and generate the spacing scale that keeps every element on the same rhythm.

Generate neumorphic CSS (background + dual shadows) based on a base color and shadow strength.

Convert between OKLCH, hex, RGB and HSL, adjust lightness and chroma perceptually, and see which OKLCH values fall outside the sRGB gamut and what they clip to.

Generate a print stylesheet that hides interface chrome, expands link URLs, controls page breaks, sets margins and stops content being cut in half at the page boundary.

Convert px to rem/em using a base font size.

Generate random colors in any, pastel, dark, vibrant, warm, or cool modes. Shows HEX, RGB, and HSL values with color history.

Plan responsive design breakpoints for all devices.

Convert between RGB, HEX, HSL and alpha formats, with the shorthand and alpha rules that trip people up.

Calculate a screen's pixel density (PPI/DPI) from its resolution and diagonal size, plus dot pitch and total megapixels. Great for choosing monitors and phones. Private.

Parse an SVG path into readable commands, show each segment on a diagram, report the bounding box and point count, and find the common faults that make paths larger than they need to be.

Create seamless geometric background patterns.

Generate smooth SVG wave shapes for website section dividers and hero backgrounds, with adjustable height, curviness and color. Copy the SVG or download it. Private.

Generate a Tailwind-style color palette from a single base hex color.

Create CSS text shadow effects with visual controls for offset, blur, and color. Preview and copy code.

Generate a modular type scale from a base size and ratio, with fluid clamp() values for responsive layouts.

Generate consistent spacing and typography scales based on a base size and ratio.

Convert between viewport units and pixels for real device sizes, and see why 100vh overflows on mobile and which of the dynamic viewport units fixes it.

Build a matrix of contrast ratios for every pair of colours in a palette, showing which combinations pass AA and AAA for normal text, large text and interface components.

Generate a named z-index scale as CSS custom properties, audit existing values for collisions and arbitrary numbers, and identify where a new stacking context will trap an element.