CSS Gradyan Oluşturucu - Doğrusal & Radyal
Create beautiful linear and radial CSS gradients visually.
Color Stops
CSS Code
About CSS Gradients
CSS gradients let you display smooth transitions between two or more colors without using image files. They are generated by the browser, which means they scale perfectly at any resolution and add zero weight to your page's load time. Gradients are defined using the background property with linear-gradient() or radial-gradient() functions.
Linear gradients transition colors along a straight line at a specified angle. Radial gradients transition from a center point outward in a circular or elliptical shape. You can add multiple color stops to create complex multi-color transitions.
Common Uses
- Hero section and banner backgrounds
- Button hover effects and accent elements
- Overlay gradients on images for text readability
- Loading indicators and progress bars
- Card backgrounds and decorative borders
Frequently Asked Questions
Are CSS gradients supported in all browsers?
Yes. CSS gradients have been supported in all major browsers since 2013 and have over 98% global browser support. You no longer need vendor prefixes like -webkit- for modern usage.
What angle should I use for a diagonal gradient?
135 degrees creates a top-left to bottom-right diagonal, which is the most common. 45 degrees goes bottom-left to top-right. 90 degrees is left to right, and 180 degrees is top to bottom.
Can I use more than two colors?
Absolutely. Click "Add Stop" to add up to 8 color stops. You can control each color and its position along the gradient. Multi-stop gradients create richer, more dynamic visual effects.