/
Toolexe Menu
Resources Hub
Discover Tools
Resources Hub
Discover Tools
CSS Gradient Generator
Create beautiful CSS gradients with multiple colors and custom directions
Gradient Controls
Gradient Type
Linear Gradient
Radial Gradient
Direction
Top to Bottom
Bottom to Top
Left to Right
Right to Left
Top-Left to Bottom-Right
Top-Right to Bottom-Left
Bottom-Left to Top-Right
Bottom-Right to Top-Left
Custom Angle
Custom Angle:
45deg
Radial Position
Center
Top
Bottom
Left
Right
Top Left
Top Right
Bottom Left
Bottom Right
Color Stops
Add Color Stop
Gradient Presets
Sunset
Ocean
Forest
Purple
Rainbow
Grayscale
Generated CSS
Copy CSS to Clipboard
Live Preview
Gradient Preview
HTML Example
Copy HTML to Clipboard
Gradient Information
Type:
Linear
Direction:
To Bottom
Colors:
2
Stops:
2
About CSS Gradients
Linear Gradients
Direction:
Define the direction using angles or keywords
Color Stops:
Specify colors at different positions
Smooth Transitions:
Colors blend seamlessly
Multiple Colors:
Use as many colors as needed
Radial Gradients
Center Point:
Control where the gradient starts
Shape:
Create circular or elliptical gradients
Size:
Control the gradient spread
Position:
Place the center anywhere
Usage Tips
• Use gradients sparingly for best visual impact
• Consider accessibility when choosing color combinations
• Test gradients on different screen sizes
• Combine gradients with other CSS effects for unique designs
• Use subtle gradients for professional looking backgrounds
