How to build a CSS gradient
- Click the From and To color swatches to open your system color picker and choose your two stops, or press 🎲 Random to shuffle a fresh pairing until one feels right.
- Set Type to Linear or Radial. For linear, drag the Angle slider (0–360°) and watch the live preview panel above the controls redraw as you move.
- Hit ⇄ Swap if you want to flip which color leads, which reverses the fade without touching the angle.
- Press Copy CSS and paste the
backgroundline from the code box straight into your stylesheet rule.
A gradient is just a smooth transition between colors, and it shows up in more places than most people realize: full-bleed hero banners, glossy call-to-action buttons, card headers, empty-state illustrations, chart fills and the mesh-style backgrounds that took over app landing pages. Hand-writing linear-gradient(135deg, #7c3aed, #2f6bff) is doable, but you end up flipping to DevTools over and over to nudge the angle or tweak a hex value. Dragging a slider against a live preview lands you on the exact blend in a few seconds, and you copy code you can trust rather than something you have to debug.
Because everything renders locally on a <div> in your browser, there is nothing to upload and no image to host, the output is a couple of lines of text, not a baked PNG. That keeps your pages fast (a CSS gradient is resolution-independent and weighs nothing) and lets you edit the colors later without regenerating an asset. The code uses the standard linear-gradient() and radial-gradient() functions, which have shipped unprefixed in every browser for years, so you can drop it in without a fallback stack.
Linear vs. radial gradients
A linear gradient blends colors along a straight line, and the angle controls that line's direction: 0deg runs bottom-to-top, 90deg left-to-right, 180deg top-to-bottom, and 135deg, top-left to bottom-right, is the diagonal you see on most buttons and hero sections. A radial gradient starts from a center point and spreads outward in rings, so the first color sits in the middle and the second forms the edge. Reach for radial when you want a spotlight, a glowing orb, a soft vignette around content, or a subtle "light source" behind a card; reach for linear for backgrounds, bars and anything with a sense of direction.
Frequently asked questions
Where exactly do I paste the copied code?
Paste the whole background: line inside a CSS rule that targets the element you want colored, for example .hero { background: linear-gradient(...); }. Because it sets background, it also works inline in a style attribute or in a styled-component template.
What does the angle value actually change?
It rotates the direction a linear gradient travels. 0deg fades bottom-to-top, 90deg left-to-right, 180deg top-to-bottom, and 135deg runs corner to corner, the most common look for backgrounds and buttons. The angle control has no effect on radial gradients, which always radiate from the center.
When should I pick radial instead of linear?
Use radial when the effect should feel like it has a center, spotlights, glowing orbs, soft vignettes or a light source behind a hero image. Use linear for headers, progress bars, buttons and full-page backgrounds where you want a clear direction.
Can I add a third color or more than two stops?
This builder focuses on a clean two-color blend so the preview stays fast and the code stays readable. To add stops, copy the output and insert extra colors inside the parentheses, for example linear-gradient(135deg, #7c3aed, #db2777, #2f6bff). Browsers space additional stops evenly unless you give each one a position.
Will these gradients slow my page down?
No. A CSS gradient is drawn by the browser from a few characters of text, so it adds no network request and no image weight, and it scales to any screen size without going blurry. That makes it lighter than a background image for the same visual effect.
Is my color choice sent anywhere?
Never. The picker, preview and code all run in your browser with local JavaScript, no colors, and nothing else, leave your device. You can even use the tool offline once the page has loaded. Need colors to start from? Pull a palette out of any photo with the Color Palette Extractor.