Build a gradient,copy the exact code.
Most gradient pickers give you a swatch and leave you guessing at the syntax. This one shows the real CSS as you drag, previews it full-size, and hands you a copy-ready background declaration you can paste straight into your stylesheet.
Your gradient
Live preview
The code
background: linear-gradient(135deg, #0a0907, #f0a82f);
Your move
A gradient is the easy part. A page that converts is the work.
Copy-ready linear gradient across 2 stops, built free
Color and polish only matter if the page underneath them sells. I build marketing sites where every visual choice, gradients included, earns its place by moving the visitor toward the one action that matters. Bring me a page and I will show you, free, where the design is helping and where it is just decoration.
Plain English
A gradient is a transition, not a decoration.
A CSS gradient is a smooth blend between two or more colors, rendered by the browser as a background image with zero extra HTTP requests. Two flavors cover almost everything you need: linear-gradient, which runs the blend along a straight line at an angle you choose, and radial-gradient, which spreads it outward from a center point like a spotlight.
The syntax is simpler than it looks. A linear gradient is an angle in degrees followed by your color stops: linear-gradient(135deg, #0a0907, #f0a82f). A radial gradient swaps the angle for a shape: radial-gradient(circle, #0a0907, #f0a82f). The browser fills in every shade in between. Add a third color and you get a multi-stop blend that travels through a middle tone.
This tool builds that string for you live. Pick your colors with the swatch or type a hex value, switch between linear and radial, drag the angle dial, and watch the preview update in real time. When it looks right, copy the full background declaration and you are done, no memorizing direction keywords or stop percentages.
The formula
background: linear-gradient(<angle>deg, <color1>, <color2>[, <color3>]);
A 135-degree blend from near-black to amber reads: background: linear-gradient(135deg, #0a0907, #f0a82f);. Swap linear-gradient for radial-gradient(circle, ...) and the same two colors spread outward from the center instead of running diagonally. The preview above shows the difference instantly.
Linear or radial: which one fits?
You want a hero, section, or button background.
Reach for linear. A subtle diagonal (120 to 160 degrees) between two close tones reads as depth without shouting. It is the safest, most reusable gradient in a marketing UI.
You want a glow, spotlight, or focal point.
Use radial. It pulls the eye to a center, which is why it works behind a product shot, a headline, or a single CTA. Keep the outer color close to your page background so the edge fades cleanly.
The blend looks muddy in the middle.
Your two colors are too far apart on the wheel. Pick hues that are neighbors (blue to teal, amber to red) or add a third stop as a bridge tone so the transition never passes through grey.
The gradient fights your text.
Contrast drops where the light stop sits behind dark text. Keep one stop dark enough across the whole area, or overlay a flat tint, then verify it against the 4.5:1 readability minimum before you ship.
Using gradients tastefully in marketing UI
01Stay in one color family
The most premium gradients blend two shades of the same hue (a dark navy into a lighter navy). Wide rainbow blends read cheap and date fast. Subtlety signals quality.
02Prefer shallow angles
A diagonal between roughly 120 and 160 degrees feels natural because light falls that way. Pure 90-degree or 0-degree gradients look flat and mechanical by comparison.
03Mind the text contrast
A gradient changes luminance across its run, so text that passes contrast on one end can fail on the other. Check both ends against 4.5:1 for body copy before you call it done.
04Use radial for emphasis only
Radial gradients pull focus hard. One per screen, placed behind the thing you most want clicked. More than that and they cancel each other out.
05Layer over imagery, not instead of it
A dark gradient over a photo (a scrim) keeps overlaid text legible while letting the image breathe. That is gradients doing real UI work, not just filling space.
06Reuse, do not reinvent
Define one or two brand gradients as CSS custom properties and apply them everywhere. Consistency is what makes a gradient feel designed rather than decorative.
The vocabulary
- Color stop
- A color and its optional position along the gradient line, e.g. #f0a82f or #f0a82f 60%. Two stops is the minimum.
- Linear gradient
- A blend that runs along a straight line at a set angle. 0deg points up, 90deg points right, 180deg points down.
- Radial gradient
- A blend that radiates outward from a center point. 'circle' keeps it round regardless of the element's shape.
- Angle
- The direction of a linear gradient in degrees. It controls which way the colors travel across the element.
- Background image
- Gradients are technically background images in CSS, so they belong in the 'background' or 'background-image' property, not 'background-color'.
Gradient questions, straight answers
Use the background property with linear-gradient or radial-gradient and at least two colors: background: linear-gradient(135deg, #0a0907, #f0a82f);. This tool builds that exact string for you as you pick colors, choose the type, and set the angle, then lets you copy it in one click.
Keep going
A calculator tells you what. A call tells you what to do about it.
Send me the account behind these numbers. I'll tell you straight where the money's leaking and what I'd fix first — free, and you keep it whether you hire me or not.