🖼️ Images & covers

Creating cohesive visual hierarchies in web design, branding, and user interface development requires balanced color palettes that share a common hue while providing adequate contrast. Selecting tints and shades manually in design tools can produce inconsistent lightness steps, leading to readability issues and muddy visual themes. Color Palette Generator resolves this challenge by generating a six-step monochromatic palette from any selected base color. By methodically stepping lightness values across fixed percentages while preserving hue and saturation, the generator creates a coordinated range of tones. Color Palette Generator runs locally in your browser using client-side JavaScript.

Translating a color choice between design software and web stylesheets frequently causes unnecessary friction. Graphic artists often work with visual color swatches or HSL adjustments, while web developers routinely require six-digit hexadecimal codes or RGB integer triples for CSS rules. Manually converting between these color representations requires tedious math or launching heavy graphic design suites. This live color picker simplifies the process by synchronizing color adjustments across models as you work. Select a shade visually or input an existing code, and view matching HEX, RGB, and HSL representations ready to paste into your design system.

Writing CSS gradients by hand means guessing hex codes, angles, and syntax from memory, then refreshing the browser to see if the result looks right. CSS Gradient Generator replaces that guesswork with two color pickers, an angle slider from 0 to 360 degrees, and a type switch for linear and radial gradients, all updating a live preview as you drag. The tool prints the finished CSS declaration — for example `linear-gradient(135deg, #667eea, #764ba2)` or `radial-gradient(circle, #667eea, #764ba2)` — ready to paste into a stylesheet. It runs locally in your browser using client-side JavaScript, so nothing you pick or preview leaves your device.

A good box shadow can give a card depth or make a button feel tactile, but tuning the six values of the `box-shadow` property by hand is slow trial and error. CSS Box Shadow Generator gives you sliders for X offset, Y offset, blur radius, and spread radius (each from -50 to 50 or 0 to 100 pixels), plus a color picker and an opacity slider, with a live preview rendered on a sample box. The finished declaration — for example `box-shadow: 0px 4px 20px 0px #0000004d;` — appears in a code box, with opacity encoded as a two-digit hex alpha. It runs locally in your browser, so your design experiments stay private.

Creating crisp, correctly proportioned favicons is an essential branding requirement for modern websites, web applications, and browser bookmarks. Uploading brand vector files or high-resolution logos to third-party favicon conversion sites can expose unreleased brand assets, while standalone design tools are often unnecessarily complex for simple asset generation. This Favicon Generator rescales logos into standard web icon dimensions directly inside your browser using the HTML5 Canvas API. It produces high-quality multi-resolution PNG favicons and provides copy-ready HTML header tags locally without transmitting your assets over the network.

Optimizing images for web publishing, email attachments, and documentation requires reducing file sizes without noticeable visual degradation. Smartphone photos frequently exceed several megabytes and contain hidden Exchangeable Image File Format (EXIF) metadata, including GPS coordinates and camera details. Traditional online tools upload pictures to remote cloud servers, creating privacy risks for sensitive screenshots, personal photos, or internal prototypes. This Image Compressor re-encodes images directly within your browser using the HTML5 Canvas API. It strips unneeded metadata headers while allowing adjustable quality control locally on your machine.

Converting image files between JPG, PNG, and WebP formats is a routine requirement for web performance optimization, document uploads, and graphic design pipelines. Many online conversion services upload your source graphics to remote servers, queue them in background processing pipelines, and expose personal photos or confidential design drafts to third-party cloud infrastructure. This Image Converter transforms images directly inside your browser using the HTML5 Canvas API. It decodes and re-encodes raster data locally across JPG, PNG, and WebP formats, providing fast format conversion while keeping your visual assets entirely on your local machine.

Cropping unwanted borders, centering subjects, and cutting graphics to exact dimensions are essential preparation steps for avatars, banner graphics, and user interface mockups. Traditional web cropping tools require uploading full-resolution photos to cloud servers, which introduces privacy concerns when handling internal screenshots, identification cards, or private photos. This Image Cropper trims pictures directly within your browser using the HTML5 Canvas API. It crops the pixel grid based on configurable width, height, and offset coordinates, exporting clean PNG excerpts locally without sending your files over the network.

Adjusting image dimensions is a frequent requirement when publishing blog thumbnails, creating social profile headers, or complying with strict portal upload specifications. Desktop photo editors are often heavyweight, while many web-based resizing services upload full-resolution pictures to remote cloud servers, creating privacy risks for personal photos or internal product mockups. This Image Resizer recalculates image dimensions directly within your browser using the HTML5 Canvas API. It enables precise pixel adjustments with optional aspect ratio preservation, generating resized images locally without sending data over the network.

Comparing differences between two versions of text—such as code snippets, configuration files, SQL queries, or document revisions—is a daily requirement across software engineering, content editing, and DevOps. Installing dedicated desktop diff utilities can be inconvenient for quick checks, while pasting sensitive code into cloud-based comparison websites risks exposing proprietary algorithms or credentials to remote servers. This Text Diff tool performs line-by-line comparisons directly inside your web browser. It highlights additions, deletions, and line modifications locally, allowing you to review textual differences quickly and privately.