Smooth Gradient Builder
Preview a two-color gradient and copy its CSS with your chosen angle.
How to use
- Choose both endpoint colors and the direction. Zero degrees runs from bottom to top; 90 degrees runs from left to right.
- Create the result and paste the background declaration inside the CSS rule for your target element.
- If text overlaps the gradient, check readability over both its lightest and darkest areas.
When to use this tool
Prepare a two-color linear gradient for a heading strip or card background. Compare the preview with the exact CSS declaration before handing a design to a developer.
Inputs and settings
Result
Example input and actual output
- Start color: #000000
- End color: #ffffff
- Angle (degrees): 90
background: linear-gradient(90deg, #000000 0%, #ffffff 100%);
The example starts black on the left and ends white on the right. Stops are fixed at 0% and 100%; additional stops and radial gradients are outside this tool’s scope.
Scope and limitations
Stops are fixed at 0% and 100%. In CSS, 0 degrees points up and 90 degrees points right.
Next step and alternatives
Contrast Checker — Check color pairs before placing text on the background.
Frequently asked questions
What changes when I change the angle?
The first value in linear-gradient() changes. At 180 degrees the transition runs from top to bottom. The element’s aspect ratio also affects how diagonal gradients look.
Does this check text contrast?
No. Check the background color under the text with the contrast checker.
Can it create radial gradients or more than two stops?
It creates two-color linear gradients with stops fixed at 0% and 100%. Additional stops and radial gradients are outside its scope.
Related tools
Share this tool
Share only the tool name and public URL. Your input and results are not included.