Gradient Properties
Customize your CSS gradient settings
%
0%
%
100%
Live Preview & CSS
See your gradient in action
background: linear-gradient(to right, #ff6b6b 0%, #4ecdc4 100%);
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
<defs>
<linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#ff6b6b" />
<stop offset="100%" stop-color="#4ecdc4" />
</linearGradient>
</defs>
<rect width="100" height="100" fill="url(#grad)" />
</svg>Use 2-3 colors for best visual results.
Linear gradients work great for backgrounds and buttons.
Radial gradients are perfect for spotlight effects.
Consider color contrast for text readability.