Skip to content
ScarlisLabs.comONLINE TOOLSFree · No account needed
Home / Tools / CSS Linear Gradient Generator
FREE TOOL

CSS Linear Gradient Generator

Create a two-color CSS linear gradient. Adjust colors and angle, preview the background and copy the CSS for your website.

Adjust the colors and angle. The preview and CSS update automatically.

background: linear-gradient(135deg, #7857ff, #18c8a7);

How to use this tool

  1. Choose the start and end colors.
  2. Adjust the angle between 0 and 360 degrees and check the live preview.
  3. Copy the CSS declaration and paste it into a CSS rule for the element you want to style.

Example

background: linear-gradient(135deg, #7857ff, #18c8a7);

Frequently asked questions

What type of gradient does it create?

This tool creates a linear gradient with two color stops. It does not generate radial or conic gradients.

How do CSS angles work?

In CSS, 0 degrees points upward, 90 degrees points right and 180 degrees points downward.

How do I use the output?

Paste the background declaration inside a CSS selector, for example the rule for a hero section or a button.