Design tools: colour, CSS effects, images

Pick colours, build CSS gradients and shadows, convert and crop images - all client-side, no upload, no signup.

A curated hub for design and UI work. Pick brand colours and check WCAG contrast, generate harmonic palettes and design-system tone ramps, build CSS gradients / box-shadows / clip-paths / filters / glassmorphism with live previews and copy-ready declarations, and run an image through the conversion / resizing / compression / cropping / eyedropper tools without ever uploading it. Everything runs in your browser; the files stay on your device.

Colour

Color Converter (HEX, RGB, HSL)

Convert colors between HEX, RGB, HSL and OKLCH.

Color Palette Generator

Generate complementary, analogous, triadic, tetradic and monochromatic palettes from any base colour.

Color Shade Generator

Generate 10 shades and 10 tints of any colour - ready as a hex list or CSS variables.

Contrast Checker

WCAG colour-contrast checker with live ratio, AA/AAA pass-fail badges and sample text.

Image Color Picker

Drop an image, click any pixel, get its hex, RGB and HSL - and build a swatch palette as you go.

CSS effects

CSS Gradient Generator

Build linear and radial CSS gradients with a live preview.

CSS Box-Shadow Generator

Layer multiple CSS box-shadows with live preview, presets and a copy-ready declaration.

CSS Filter Generator

Live CSS filter playground with sliders for blur, brightness, contrast, saturate, sepia, grayscale, invert, hue-rotate and opacity.

Glassmorphism Generator

Frosted-glass CSS with live preview - tune background colour, backdrop blur, border and shadow over a busy backdrop.

Shapes & motion

CSS Clip-Path Generator

Build polygon clip-paths visually - triangle, hexagon, star, message bubble and more - with a live preview and copy-ready CSS.

Border-Radius Generator

Asymmetric border-radius with all 8 corner values, live preview and shape presets (pill, blob, leaf, ticket).

Cubic-Bezier Generator

Visual cubic-bezier editor with animated preview and 12 industry-standard easing presets.

Image processing

Image Converter

Convert PNG, JPG, WebP and AVIF in your browser - no upload, no signup.

Image Resizer

Resize images by pixels or percentage in your browser - no upload.

Image Compressor

Shrink JPG and WebP file size with a quality slider and live before/after preview.

Image Cropper

Crop images by dragging a selection - free or fixed aspect ratios (1:1, 4:3, 16:9, 9:16).

Image to Base64

Convert an image to a Data URI (base64) with ready-to-paste CSS and HTML snippets - or paste a Data URI to preview the image.

Other

Favicon Generator

Drop a square image, download PNG favicons in every standard size.

Free design tools: colour pickers, CSS generators and image utilities

Most design tools are either heavyweight desktop apps or single-purpose websites. This hub gathers the small daily-driver utilities a web designer or product designer reaches for: a colour-converter for hex / RGB / HSL round-trips, a palette generator that emits the five classic harmonies from a base hex, a design-system tone-ramp generator (50-950 like Tailwind), a WCAG contrast checker with AA / AAA badges, an eyedropper that samples colours from any uploaded image, a CSS gradient editor with multi-stop support, a CSS box-shadow stack with Material elevation presets, a CSS clip-path editor with twelve polygon presets, an asymmetric border-radius generator, a cubic-bezier easing editor, a CSS filter playground covering blur / brightness / contrast / saturation / hue-rotate, and a glassmorphism generator that previews over a busy backdrop.

The image side adds five client-side processing tools: a format converter (PNG / JPG / WebP / AVIF), a resizer with aspect-ratio lock, a quality-based compressor with before/after preview, a base64 / Data URI encoder for inline use in HTML and CSS, and a drag-rectangle cropper with common aspect-ratio presets. Each runs entirely via the browser's Canvas API; images never leave the device, which means working sessions stay private and there's no upload time on slow connections.

All tools are free, no signup, with localised copy across English, French, Spanish, German and Portuguese. Pages load in milliseconds and weigh well under 250 KB of JavaScript - small enough to use on a laptop tethered to a phone or behind a corporate proxy that throttles uploads.