CSS Gradient Generator

Visually create stunning gradients and get the CSS code.

deg
background: linear-gradient(90deg, #9d00ff, #00f7ff);

How to Generate a CSS Gradient

  1. Choose Gradient Type: Select either "Linear" or "Radial" to start.
  2. Select Colors: Use the color pickers to choose your desired colors. The text field next to each picker will update with the HEX code, which you can also edit directly.
  3. Adjust Angle (for Linear): If you selected a linear gradient, use the slider or number input to change the angle of the gradient.
  4. Preview the Result: The large preview box will update in real-time to show you exactly what your gradient looks like.
  5. Copy the CSS: The generated CSS code will appear below the preview. Click the copy icon to copy it to your clipboard and use it in your projects.