Grabient

Grabient is a web-based CSS gradient generator and color palette finder that allows users to create, preview, and export custom gradient designs for use in web development, graphic design, and UI projects. The tool provides a clean, interactive interface where users can select two or more colors, adjust the angle and position of the gradient, and choose from a library of predefined popular gradient styles. Instead of relying on complex code writing, users can intuitively click and drag to build linear, radial, or conic gradients, with real-time preview displayed on a canvas. The core functionality includes a color picker that supports both manual hex/rgb input and a "pick color from screen" feature, which extracts colors directly from the user's monitor using a browser-based eyedropper tool. This is especially useful for designers who want to match gradients to existing brand colors or images. Users can toggle between light and dark themes for the tool’s own interface, accommodating different working environments and personal preferences. Grabient offers a comprehensive selection of pre-made gradient palettes organized by mood and style, such as "indigo," "arctic," "futuristic," "gold & blue," "iris," "pomegranate," "energetic," "hologram," "dynamic surfing," "ivory, olive, lime," "luxurious mist," "green, mint, cyan," "understated," "ominous," "rose," "wicker," "coral, gold, yellow," and "velvet leather." Each palette comes with a visual sample and a popularity score (e.g., "1 year 73" indicating the number of uses over the past year), helping users discover trending combinations quickly. The gradient editor allows fine control over angle steps (e.g., 0°, 45°, 90°, 135°, etc.) and style types (linear, radial, and more).