CSS Gradient Generator
Builds a linear-gradient CSS string in the browser. Pick hex color stops and an angle in degrees, then copy the CSS as text. Optional radial uses the same hex stops. This is not a design system, not an image exporter, and not a Figma plugin.
CSS gradient generator
Client-side only. Colors and angle are not sent to a server. This is a CSS string generator, not a design system, not an image exporter, and not a Figma plugin. Input is not sent.
How to use
- Pick at least two hex color stops. The default pair is red and blue at 90 degrees.
- Set the angle for a linear gradient, or switch to radial. Read the CSS as text. Copy uses the clipboard on this device only.
- Nothing is sent to a server. This is not a design system, image exporter, or Figma plugin. Refreshing the page clears the form.
Results
linear-gradient(90deg, #ff0000, #0000ff)Text only. Preview uses a CSS background-image from the validated string. Client-side only. Not sent. Not a design system, image export, or Figma plugin.
Runs in your browser. Nothing is uploaded.
Frequently asked questions
What linear-gradient CSS does this generator produce?
It builds a CSS linear-gradient() string from hex color stops and an angle in degrees. The worked example is two stops #ff0000 and #0000ff at 90deg, which becomes linear-gradient(90deg, #ff0000, #0000ff). You copy that string into a stylesheet. This page does not compile CSS or write files.
Which hex color stops are accepted?
Stops must be hex colors: #rgb or #rrggbb. Input is case-insensitive. Output is lowercase six-digit hex, so #F00 becomes #ff0000. Named colors such as red, rgb(), hsl(), and anything that is not a hex stop are rejected. Invalid colors fail closed.
How does the gradient angle work?
The angle is degrees from 0 to 360. 90 is the default and is valid. Values outside that range fail closed. The angle is written into the linear-gradient() string as Ndeg. Radial mode ignores the angle and uses radial-gradient() with the same hex stops.
Is this client-side? Do I need an account?
Yes, it is client-side only. There is no signup. Color stops and the angle never leave the browser. Tallymill does not save what you enter. Refreshing the page clears the form.
Is this a Figma plugin, design system, or image exporter?
No. This page is a CSS string generator. It is not a Figma plugin, not a design-system product, and not an image exporter. There is no PNG or SVG download, no Figma API, and no design tokens. The optional preview only sets a CSS background-image from the already-validated string.