WebGradients

WebGradients is a free online resource that offers a curated collection of 180 linear gradient presets for use in web design, UI development, graphic design, and other digital projects. The gradients are presented as ready-to-use CSS code snippets that can be directly copied and pasted into stylesheets or inline styles. Each gradient entry includes a visual preview, a human-readable name (e.g., “Warm Flame,” “Night Fade,” “Spring Warmth”), the two hex color values that define the gradient, and a one-click “Copy CSS” button that copies the full CSS3 cross-browser code to the clipboard. The copied code contains vendor prefixes (e.g., -webkit-, -moz-, -o-) to ensure compatibility across different browsers. Users can also view the gradient as a PNG image, which is available for download. Additionally, the site provides bonus downloadable packs for Sketch and Photoshop, allowing designers to integrate the gradients directly into their design tool workflows. The gradients are organized in a single continuous grid layout, making it easy to scroll through all options at a glance. Each gradient card shows a smooth color transition preview, and when the user hovers over or clicks an entry, a success message appears confirming the code has been copied. The collection is intended primarily for use as background fills for web pages, UI components such as buttons, cards, headers, and modals, as well as for decorative purposes in presentations, social media graphics, and mobile app interfaces. The gradients are linear in direction, each transitioning between two specified color stops. Users can modify the angle or direction of the gradient by editing the CSS after copying, though the default angle is set to a diagonal orientation (typically 135 degrees) for aesthetic balance. The site