everydaytools
English
Web & creator

Gradient Generator

Preview a two-color linear gradient and copy the matching CSS with a chosen angle.

Workspace⌁ Processed on your device

Loading tool…

Processed on your device

01 /

How it works

Preview a two-color linear gradient and copy the matching CSS with a chosen angle. Enter your values or try the example. Run the action, check the result and copy or download it. Your input remains editable after an error.

02 /

Example

#246649 + #EEF4E9 · 90°
→ background: linear-gradient(90deg, #246649, #EEF4E9);
03 /

When to use this tool

Create a CSS background for a banner or card and preview its direction.

Supported formats & limits

Opaque sRGB colors only. HEX accepts 3 or 6 digits; RGB channels are integers from 0 to 255; HSL uses hue 0–360 and percentages 0–100. Conversions round to 8-bit RGB.

Something isn’t working ↗

Try these next

Keep creating with more everyday tools.

Web & creator
Favicon GeneratorCreate a ZIP favicon kit with a multi-size ICO, PNG icons, a web manifest and installation snippets.PNG to ICOConvert a PNG into one ICO file containing 16, 32 and 48 pixel icons.Image to FaviconCrop an image to a square PNG favicon at your chosen size and copy its HTML link tag.Color PickerChoose a screen color and read its HEX, RGB and HSL values together.HEX to RGBConvert a three- or six-digit HEX color into red, green and blue channel values.

Good to know

What happens when I change the input?

An edited input needs a new result. Run the action again; previous download links are removed so you cannot mistake an old output for the current one.

Are my files uploaded?

Your files and pasted content are processed in temporary browser memory and are not uploaded for processing. App preferences store only tool IDs, language and theme. There are no accounts, ads or automatic error reports. Closing the page discards your workspace; download results you want to keep. Production pages use Google Analytics for visit statistics; see the Privacy page for details.