Pick colors. Copy CSS. Done.
background: linear-gradient(135deg, #6366F1, #EC4899);GradientLab helps you create beautiful CSS gradients without writing code by hand. Choose two colors, set the direction, and instantly preview the result. The tool supports both linear and radial gradient types, letting you switch between them with a single click. Once you are happy with the look, copy the production-ready CSS and paste it straight into your stylesheet or Tailwind config. Everything runs locally in your browser, so your work stays private.
A linear gradient transitions between colors along a straight line at a specific angle, making it ideal for backgrounds, hero sections, and banners. A radial gradient radiates outward from a center point, which works well for spotlight effects and circular UI elements. GradientLab lets you control the angle for linear gradients and preview the radial option in real time, so you can compare both styles before committing to one.
Not sure where to start? Browse 12 handpicked gradient presets curated for modern web design, or hit the Randomize button to discover unexpected color combinations. Each preset is fully editable, so you can use it as a starting point and fine-tune the colors and angle. When you are ready, the one-click copy button places the complete CSS rule on your clipboard, including the fallback background-color for older browsers.
Need to pick exact colors first? Try the Color Picker to find the perfect HEX or RGB values. Once your design is final, wrap your screenshots with the Screenshot Mockup tool to present your gradient in a polished browser frame for portfolios and social media.
Generate a matching favicon using the favicon generator or optimize your exported images with the image compressor.