Design tools
Free online design tools that run entirely in your browser. Generate QR codes, build color palettes and CSS gradients, craft box shadows, check color contrast, and calculate aspect ratios. No account, no watermarks, copy-ready output.
All design tools
Analogous Color Generator
Turn any base color into a three swatch analogous palette by rotating its hue.
Aspect Ratio Calculator
Solve the missing width or height for any aspect ratio, from 16:9 to a custom shape.
CSS Box Shadow Generator
Dial in a CSS box-shadow with live preview and copy the exact code.
CMYK to RGB Converter
Convert CMYK ink percentages to RGB and hex with a live swatch, plus a reverse RGB to CMYK view. Copy any format.
Color Blindness Simulator
See how an image looks under common types of color vision deficiency.
Color Mixer
Blend two hex colors at any ratio and copy the mixed hex and RGB.
Color Name Finder
Enter any color and get the nearest CSS named color, with swatches to compare and the next closest names.
Color Palette Generator
Build a color palette from a base color or an image, then copy the hex values.
Color Shades Generator
Build a tint and shade scale from one base color and copy the numbered steps.
Color Tints Generator
Build a tint ramp by mixing any base color toward white in even steps.
Color Wheel
An interactive HSL color wheel. Click or drag to pick a color and see its harmonies marked live on the wheel.
Complementary Color Calculator
Enter a color and get its exact opposite on the color wheel, with copyable codes.
Conic Gradient Generator
Build a CSS conic gradient visually and copy the background code.
Contrast Checker
Check the WCAG contrast ratio between two colors and see which AA and AAA levels pass.
CSS Animation Generator
Build keyframe animations with a live preview and copy the CSS.
CSS Border Radius Generator
Round each corner with sliders and a live preview, then copy the exact CSS. Link all corners together or set elliptical radii.
CSS Button Generator
Style a button with live controls and copy the base, hover, and focus CSS.
CSS Clamp Calculator
Generate a responsive CSS clamp() for fluid type and spacing that scales smoothly between a min and a max size.
CSS Clip Path Generator
Drag points over a live preview to build a clip-path shape and copy the CSS.
CSS Filter Generator
Dial in a CSS filter with sliders, watch it on a live sample, and copy the exact code.
CSS Flexbox Generator
Build a flex container with toggles and sliders, watch the numbered boxes rearrange live, then copy the CSS. Set direction, alignment, wrapping, and gap.
CSS Grid Generator
Set the number of columns and rows and the gap, watch the numbered grid update live, then copy the container CSS.
CSS Loader Generator
Design a lightweight CSS loading spinner, ring, dots, or bars, with a live preview, then copy the self-contained animation.
CSS Pattern Generator
Build tiling background patterns with pure CSS gradients. Pick stripes, dots, a grid, checkerboard, or diagonal lines, set two colors and the scale, then copy the background code.
CSS Scrollbar Generator
Design a custom scrollbar and copy cross-browser CSS.
CSS Text Shadow Generator
Dial in a CSS text-shadow with a live preview and copy the exact code.
CSS Transform Generator
Compose translate, rotate, scale, skew, and perspective into one CSS transform, previewed live.
CSS Transition Generator
Set the property, duration, delay, and timing function, hover a live preview to feel the motion, and copy the transition CSS.
CSS Triangle Generator
Build a pure CSS triangle in any direction with a live preview, then copy the exact code.
Cubic Bezier Generator
Shape a CSS easing curve by dragging two handles, race it against a second curve in motion, and copy the code.
Glassmorphism Generator
Build a frosted glass panel with a live preview and copy the CSS.
CSS Gradient Generator
Design linear, radial, and conic CSS gradients with custom color stops, per-stop transparency, and copy the code.
Gradient Text Generator
Fill headings and words with a color gradient and copy the CSS.
HEX to CMYK Converter
Paste a hex color code and read its cyan, magenta, yellow, and black ink percentages instantly, with a live swatch.
Hex to HSL Converter
Turn a hex code into HSL, HSLA, and RGB with a live swatch and one-click copy for every format.
HEX to OKLCH Converter
Paste a hex color and get the CSS oklch() value with lightness, chroma, and hue.
Hex to RGB Converter
Turn a hex code into RGB, RGBA, and HSL with a live swatch and one-click copy for every format.
HSL to Hex Converter
Set hue, saturation, and lightness and get the matching hex, RGB, and HSL values, with a live swatch preview.
HSL to RGB Converter
Turn hue, saturation, and lightness into RGB and HEX. Slide or paste, copy the result.
HSV to RGB Converter
Set hue, saturation, and value and get the matching RGB, hex, and HSL, with a live swatch preview.
HWB Color Converter
Convert HEX, RGB, or HWB colors to the CSS hwb() format with live sliders and a swatch.
Placeholder Image Generator
Generate a placeholder image at any size or preset, with custom colors, a label, and PNG, JPEG, WebP, or SVG export.
Mesh Gradient Generator
Drag color points around a canvas to build a smooth mesh gradient and copy the CSS.
Monochromatic Color Generator
Build a single-hue color ramp from any base color. Even lightness steps, hex codes, and CSS variables.
Neon Text Generator
Build a glowing neon text effect and copy the CSS.
Neumorphism Generator
Design soft neumorphic surfaces and copy the CSS box-shadow.
Pastel Color Generator
Generate soft pastel color palettes with hex codes. Pick a hue range, set the count, and copy any swatch.
QR Code Generator
Turn a URL, WiFi login, contact card, email, or map location into a scannable QR code and download it as a PNG or SVG.
CSS Radial Gradient Generator
Build a CSS radial gradient with a circle or ellipse shape, a draggable center, and as many color stops as you need, then copy the background code.
Random Color Generator
Generate a set of random colors as hex and rgb swatches, then copy any one or the whole set.
RGB to CMYK Converter
Turn RGB screen colors into CMYK ink percentages for print, with a live swatch.
RGB to Hex Converter
Enter red, green, and blue values with an optional alpha and copy the matching HEX, 8-digit HEX, and HSL, next to a live swatch.
RGB to HSL Converter
Enter red, green, and blue values with an optional alpha and copy the matching HSL, HSLA, and HEX, next to a live swatch.
RGB to HSV Converter
Turn red, green, and blue channel values into hue, saturation, and value. Move the sliders or paste a color and the HSV result updates live.
RGB to LAB Converter
Convert RGB colors to CIELAB L, a and b values, with a CSS lab() string and an optional XYZ readout.
Split Complementary Color Generator
Turn any color into a split complementary palette with an adjustable split angle.
SVG Blob Generator
Design smooth, organic SVG blob shapes with sliders for complexity, randomness, size, and color, then copy the markup or download the file.
SVG Pattern Generator
Build a repeating SVG background from dots, lines, crosses, waves, or triangles, then copy the tile, the full SVG, or a CSS data URI.
SVG Wave Generator
Design smooth SVG wave dividers for the top or bottom of a section, then copy the markup or download the file.
Tetradic Color Generator
Turn one base color into a four color tetradic scheme. Pick rectangle or square spacing and copy the palette as CSS variables.
Triadic Color Generator
Enter a base color and get its two triadic partners, spaced 120 degrees apart on the color wheel.
Type Scale Generator
Build a modular type scale from a base size and a ratio, with px and rem values, CSS custom properties, and live heading previews.
Frequently asked questions
- Is anything I create uploaded to a server?
- No. QR codes, color palettes, CSS gradients, box shadows, contrast checks, and aspect ratio math all run locally in your browser. Your work stays on your device.
- Which design tools are available?
- A QR code generator, a color palette generator, a CSS gradient generator, a CSS box shadow generator, a contrast checker, and an aspect ratio calculator, with more added over time.
- Does the contrast checker follow accessibility guidelines?
- Yes. It compares foreground and background colors against WCAG contrast ratios so you can confirm text meets AA or AAA requirements before you ship.
- Can I copy the generated CSS or QR code?
- Yes. Gradients and box shadows produce copy-ready CSS, and QR codes can be downloaded as an image, so you can paste results straight into your project.
- Are the design tools free?
- Yes. Every design tool is free to use, with no watermarks, no account, and no sign-up.