[{"data":1,"prerenderedAt":29},["ShallowReactive",2],{"content-css-gradient-generator-en":3},{"about":4,"steps":8,"faq":13},[5,6,7],"CSS gradients are not images but are rendered by the browser: they load without an extra file, scale to any size and can be changed at any time. Typical uses are backgrounds of hero sections, buttons, cards or text with gradient color.","The generator creates linear gradients at any angle, radial gradients as a circle or ellipse and conic gradients for color wheels or pie charts, each also as a repeating pattern. You can set up to 20 color stops, including transparency (e.g. #00000080 or rgb(0 0 0 \u002F 50%)).","The finished code also contains a solid background-color as a fallback. The settings are stored in the URL, so you can share a gradient as a link.",[9,10,11,12],"Choose the gradient type and set the angle, shape or center – or start with a preset.","Adjust the color stops: pick a color or type it in, and move its position with the slider.","Add more stops or flip the gradient with “Reverse”.","Copy the CSS code and paste it into your stylesheet.",[14,17,20,23,26],{"q":15,"a":16},"What is the difference between linear, radial and conic?","A linear gradient runs along a straight line in one direction. A radial gradient spreads out from a center as a circle or ellipse. A conic gradient rotates around the center, like the colors of a color wheel.",{"q":18,"a":19},"How do I get hard edges instead of smooth transitions?","Put two stops with different colors at the same position, e.g. red at 50% and blue at 50%. Combined with “Repeating” this creates stripes.",{"q":21,"a":22},"How do I put a gradient on top of an image?","background-image accepts several comma-separated values. Write the gradient with transparent colors first, followed by url(image.jpg). The gradient then sits on top of the image.",{"q":24,"a":25},"Which colors go well together?","Find harmonious color combinations with the [[color-palette-generator]], and convert colors between HEX, RGB, HSL and OKLCH with the [[color-converter]].",{"q":27,"a":28},"Do CSS gradients work in all browsers?","Linear and radial gradients work in all current browsers, conic gradients have also been supported since around 2020. For very old browsers the code includes a solid background color as a fallback.",1792518996411]