CSS gradient generator
Create a CSS linear gradient code using two colors and angles.
Input
The example value has been entered. Check it immediately or change the value.
Input is processed in the browser. Refreshing returns a sample value.
Result
Check or change the value using the example value result.
Uses two 6-digit HEX colors. Insert the results into the CSS background property.
Share result
Share the tool link and result text together. No URL is included in the result. Check the below content and then share it.
Calculation·conversion criteria
Create a CSS linear gradient code with two colors.
Input example
#000000 → #ffffff, 90 degrees
90deg is a gradient that moves from left to right. Enter the start and end colors to generate CSS for the background property.
How to use
- Use the entered example value or change the start HEX, end HEX, or angle (degrees) items.
- Click Verify result and check the following result.
- Result can be copied if needed.
Frequently Asked Questions
What are 0 degrees and 180 degrees?
In CSS, 0deg points upward and 180deg points downward. This tool uses only two opaque colors; intermediate or multiple colors must be adjusted separately in the output code.
Calculation criteria and reference materials
- W3C — CSS Images
Direction and color points in linear-gradient()
Verification of calculation criteria: · Calculation·verification principles · Report errors