CSS Linear Background Gradient Generator
How to Use The CSS Linear Background Gradient Generator:
- Choose Colors: Use the color picker tool or input color codes directly to select the colors for your gradient. Add multiple colors by clicking on the
Add Color
button if needed. - Set Gradient Angle: Adjust the gradient angle by either dragging the angle slider or inputting a specific degree (e.g., 90° for a horizontal gradient).
- Randomize Colors: If you’re unsure of the color combination, click “Randomize” to generate random colors for your gradient.
- Reverse Gradient: Click
Reverse
to swap the positions of your chosen colors, altering the gradient direction. - Adjust Dimensions: Set the width and height of the gradient box by inputting values in the
Width
andHeight
fields (in pixels). - Customize Border Radius: Input a value in the
Border Radius
field to round the corners of the gradient box, if desired. - Animate (Optional): Click the
Animate
button if the tool offers animation features for the gradient. - View & Export: Preview the gradient in the displayed box. Click
Export
to obtain the CSS code, which you can copy and use in your project. - Use the Generated CSS: Copy the generated CSS code and integrate it into your stylesheet or directly into the style tag within your HTML file.
- HTML Integration: Place the
<div class="gradient"></div>
HTML code snippet within your webpage to display the gradient as a background.