Gradient Style
Linear
135deg
First Color
#7b2cbf
rgb(123, 44, 191)
hsl(271, 63%, 46%)
Second Color
#9d4edd
rgb(157, 78, 221)
hsl(271, 68%, 59%)
CSS Code
background: linear-gradient(135deg, #7b2cbf, #9d4edd);
- Generate: Just press "Generate New Gradient" and a new gradient will automatically be created.
-
Check the Results: The result codes will automatically appear below, including:
- Gradient Style (Linear or Gradial)
- First Color (in HEX, RGB, and HSL)
- Second Color (also in HEX, RGB, and HSL)
- CSS Code for quick and easy copying
- Copy Codes: Click the "Copy" button next to the code you want.
This tool helps you find eye-catching CSS gradients for your design. It automates the creation of two-color gradients, instantly giving you both visual results and ready-to-use CSS code.
It's perfect for web designers and developers looking for instant background styles or color changes without manual coding. Just click, view, and copy.
-
Linear Gradients:
- The colors blend in a straight line. The tool provides a random direction, such as
rightor135deg.
- The colors blend in a straight line. The tool provides a random direction, such as
-
Radial Gradients:
- Colors expand outwards from a central point, forming circles or ellipses. A random shape and position are chosen for you.
-
Color Formats (HEX, RGB, HSL):
- Each of the two gradient colors is displayed in Hexadecimal (
#RRGGBB), RGB (rgb(R, G, B)), and HSL (hsl(H, S%, L%)). This helps you use those exact shades elsewhere in your design.
- Each of the two gradient colors is displayed in Hexadecimal (
-
Direct CSS Output:
- The crucial `background` CSS property (e.g.,
background: linear-gradient(...);) is provided, ready for you to paste directly into your stylesheet.
- The crucial `background` CSS property (e.g.,
Can I input my own colors or adjust the gradient manually?
This tool specializes in random generation for quick inspiration. It doesn't currently support manual color input or specific angle adjustments. For precise control, you'd typically write CSS code or use a dedicated design application.
How do I apply the generated gradient to my website?
Copy the CSS code from the "CSS Code" box, or by clicking the gradient preview. Then, paste this line into your stylesheet (e.g., .your-element { background: linear-gradient(...); }).
Will I get the same gradient if I generate it again?
No, each generation is random. If you find a gradient you like, make sure to copy its CSS code immediately, as it's unlikely to reappear.
What does the loading animation mean?
The loading animation provides visual feedback that a new gradient is being created. It's a design element to make the experience smooth; the actual generation is extremely fast.
