DEV · GRADIENT
CSS Gradient
Pick colors and angle for instant CSS and preview.
- 1.Pick a start color and an end color
- 2.Choose a linear or radial gradient type
- 3.For linear, adjust the direction with the angle slider
- 4.Check the preview on the right and copy the generated CSS code
→ Output: A gradient preview and the CSS background code to copy
Preview
CSS
background: linear-gradient(135deg, #3d2566, #b69cff);
About this tool
Pick two colors and an angle, and get ready-to-paste CSS `linear-gradient` code. You adjust color and direction while watching the result, which saves the edit-and-refresh round trip.
When to use it
- —Settling on a background gradient for a button or banner and moving it into code
- —Trying a header background that blends two brand colors
- —Comparing angles to see which direction reads best
Good to know
- —Only two-color linear gradients are produced; radial gradients and three-or-more color stops are not supported.
- —Blending two colors of very different saturation can show a muddy gray band in the middle; colors of similar lightness blend more cleanly.
- —The generated code is standard CSS and works in current browsers without vendor prefixes.