Gradient Generator
Generate linear and radial CSS gradient code with custom colors and angle settings.
Run tool
The Gradient Generator creates ready-to-use CSS gradient strings for modern web design and interface styling. You can configure two custom color values, pick a directional angle in degrees, and choose between linear and circular radial gradient styles. When you select a linear layout, the tool calculates the direction using your specified angle and reduces values above 360 degrees into a standard circular range. If you leave the angle field empty or provide non-numeric text, it defaults cleanly to 45 degrees. The primary color setting defaults to coral red (#ff6b6b) and the secondary color setting defaults to teal (#4ecdc4). You can paste hex codes, named colors, RGB notations, or HSL values directly into the input fields. After you submit your parameters, the generator produces the exact CSS property rule for your stylesheets, UI components, and design mockups.
Instructions
- Select or type your starting color in the first color field.
- Enter your target color in the second color field using hex, RGB, or named formats.
- Set the gradient angle in degrees if you want a custom linear direction.
- Choose linear or radial as the gradient type.
- Click the run button to generate your formatted CSS gradient code.
Examples
- Linear gradient from #ff6b6b to #4ecdc4 at 90 degrees produces a horizontal color transition.
- Radial gradient from #1a2a6c to #fdbb2d creates a circular color blend outward from the center.
FAQ
What happens if I enter an angle greater than 360 degrees?
The generator calculates the angle modulo 360, mapping values such as 405 degrees directly to 45 degrees.
Which gradient styles can I generate?
You can generate standard linear gradients with an angle or circular radial gradients.
What default colors are used if I leave the fields empty?
Color 1 defaults to #ff6b6b and Color 2 defaults to #4ecdc4.