Build beautiful linear gradients with a live preview and instant CSS copy
background: linear-gradient(to right, #FF6B35, #1A365D);
CSS linear gradients let you transition smoothly between two or more colors along a straight line. They are defined using the linear-gradient() CSS function and can be applied to any element's background.
Use this tool to pick your start and end colors with the color pickers or by typing a hex value directly. Choose from six preset directions — horizontal, vertical, or diagonal — and watch the preview update live. When you're happy with the result, copy the single-line CSS declaration and paste it straight into your stylesheet.
Everything runs entirely in your browser. No images are generated, no data is sent to a server.
Yes, CSS Gradient Generator is completely free to use on UtilityCove.
No. CSS Gradient Generator runs in your browser, so your input stays on your device.
Yes. CSS Gradient Generator works on modern mobile and desktop browsers.
CSS Box Shadow Generator
Build and preview CSS box-shadow values with one-click copy.
CSS Glassmorphism Generator
Generate frosted-glass CSS with backdrop blur and copy-ready styles.
QR Code Generator
Generate custom QR codes for any text or URL.
WiFi QR Code Generator
Generate a scannable QR code to share WiFi credentials instantly.
Letter Profile Picture
Generate avatar images from initials with custom colors.
Spinner Wheel
Customizable random spinner wheel with your own options.