How to pick colors and generate CSS gradients, shadows, and borders
Copy HEX/RGB/HSL, linear-gradient, box-shadow, and border CSS from live previews — design tokens in the browser, not a full IDE.
Picker vs converter
Color Picker at /tools/color-picker is a visual chooser that copies HEX, RGB, and HSL. Color Converter at /tools/color-converter is for typing #FF5733 or rgb(255, 87, 51) when you already have a value. Use the picker when you are exploring; use the converter when a ticket pasted a hex.
Sample a color from a photo
Image Color Picker at /tools/image-color-picker is the page that reads a JPEG, PNG, or WebP you choose in this tab. Hover magnifies the pixels under the pointer with a nearest-neighbor loupe so thin lines and anti-aliased edges are easier to judge; click locks HEX, RGB, and HSL. Nothing is uploaded. It is not an operating-system eyedropper for other windows, and it is not the saturation pad — the source is the file. Crop or compress the bitmap first if the photo is huge, then sample here. Image Base64 embeds a file; it does not return a hex.
Gradient, shadow, border
Gradient Generator at /tools/gradient-generator builds a CSS linear-gradient with a live preview (angle and color stops). CSS Shadow Generator at /tools/css-shadow-generator tunes box-shadow offsets, blur, spread, and color. CSS Border Generator at /tools/css-border-generator sets width, style, radius, and color. Copy the CSS into a stylesheet. Format the snippet with CSS Formatter if you want indent. These are not Tailwind config files and not Figma exports.
Steps
1) If the token is in a screenshot or logo, open Image Color Picker, hover to magnify, and click a pixel. If you are inventing a swatch, open Color Picker (or Converter) and copy the token. 2) Open Gradient, Shadow, or Border and match that color. 3) Adjust the preview until it looks right on Dark and Light site themes if your app has both. 4) Paste into your CSS. 5) Minify later with CSS Formatter if a build step has not already.
Worked example
A product photo: sample #10b981 on Image Color Picker, then HSL for a hover lightness tweak on Color Picker. A hero: linear-gradient(135deg, #0f172a, #10b981). A card: box-shadow 0 8px 24px with a translucent black. A button: 1px solid, 8px radius. Image compressor/resizer/cropper edit pixels; they do not emit CSS. QR codes are graphics. Nothing is uploaded.
Limits
No radial/conic editors on the gradient page unless the UI exposes them. No filter: drop-shadow separate from box-shadow. No design-system versioning. Related: /tools/image-color-picker, /tools/color-converter, /tools/css-formatter, /tools/html-formatter.
Privacy
Tokens stay in the tab. Related: /tools/image-color-picker, /tools/gradient-generator, /tools/css-shadow-generator, /tools/css-border-generator. Close the page if the palette is an unreleased brand.