CSS Gradient Generator

Build a CSS linear-gradient from two colors and an angle, with a live preview.

background: linear-gradient(90deg, #6366f1, #ec4899);

Related tools

How it works

  1. 1

    Pick two colors

    Use the color pickers.

  2. 2

    Set the angle

    In degrees, 0 to 360.

  3. 3

    Copy the CSS

    A ready-to-paste background property.

FAQ

Does this tool send my colors anywhere?
No - the gradient is generated entirely in your browser.
Can I use more than two colors?
Not in this version - two colors covers the most common gradient use case.

Tool4U.net — every tool runs in your browser. No file ever leaves your device unless the tool says so.

© 2026 Tool4U.net