Updated · Built and checked by the PlinzoTools team, formulas tested against published sources
Build a linear gradient background with a live preview.
background: linear-gradient(135deg, #00D4FF 0%, #2196F3 100%);This tool builds a CSS linear-gradient background from an angle and two colors, with a live preview so you can see exactly what the gradient looks like before copying the CSS.
Choose an angle (0-360 degrees) and two colors. The preview and generated CSS update instantly.
linear-gradient(angle, color1, color2) paints a smooth transition between colors along a line at the specified angle -- 0deg points upward, 90deg points right, 180deg points downward, following CSS's gradient angle convention (which differs from standard math angle convention).
For other CSS visual effects, see the Box Shadow Generator or Glassmorphism Generator.
The tool starts with an angle of 135 degrees, a cyan start color (#00D4FF) and a blue end color (#2196F3). It writes both stops with explicit positions, so the result reads background: linear-gradient(135deg, #00D4FF 0%, #2196F3 100%); Because the positions are always 0% and 100%, the two colors blend across the whole element. If you later hand-edit those percentages, you can shift where the transition happens, for example making the first color hold until 30% before blending.
Angles run clockwise from the top. A few useful anchors are listed below.
Values outside 0 to 360 are still valid CSS, and a blank or non-numeric angle field is treated as 0. On a non-square element, diagonal angles adapt to the box, so a 135 degree gradient on a wide banner and on a tall card will look slightly different. Always preview at the shape you will actually use.
Say you want a hypothetical call-to-action strip that fades from a deep navy on the left to a teal on the right. Set the angle to 90, the start color to the navy and the end color to the teal. Copy the declaration and paste it into your rule, for instance on a class named hero-strip. Then add a solid fallback color line before it so that if a stylesheet fails to load or an old tool ignores the gradient, the area still has a background. Finally, check that any text placed on top is readable at both ends of the gradient, not just the middle.
This tool generates only linear gradients with exactly two stops. It does not create radial or conic gradients, transparency effects, or repeating patterns. To extend the result, keep the generated output and add more comma-separated color stops manually, such as a third color at 50%.
CSS gradient angles are measured clockwise from straight up (like a compass bearing), unlike standard math angle convention which measures counter-clockwise from the right -- a common point of confusion.
This tool builds a simple 2-color gradient for quick use; CSS itself supports any number of color stops (e.g. linear-gradient(45deg, red, yellow, blue)) if you want to hand-edit the generated CSS further.
Yes -- CSS linear gradients have been universally supported in modern browsers for many years with no vendor prefixes needed.
Angles are applied relative to the element box, so a diagonal gradient stretches with the shape. Preview at the real proportions of the element you will style.
Yes. Use the color pickers to set your two brand values and read the hex codes from the generated CSS. Those hex values are what you will reuse elsewhere in your stylesheet.
Edit the percentage after a color in the generated CSS. For example, changing the first stop to 40% keeps the first color solid until 40% of the way across before blending begins.
Use 180 degrees, which starts with the first color at the top and ends with the second at the bottom.
Reference: MDN Web Docs