How to Make Japanese Gradients｜Traditional-Color CSS & Tailwind

Q: How do I copy the CSS gradient code?

Pick a preset from the gallery to open the modal. Choose the CSS or Tailwind tab and press “Copy code” to copy it to your clipboard, then paste it into the background of your element.

Q: What is the difference between linear, radial and conic?

Linear blends along a straight line, radial spreads outward from a center, and conic sweeps around a center by angle. Switching the type in the modal also changes the available controls (angle or shape).

Q: Can it output Tailwind classes?

Yes. Select the Tailwind tab in the modal to output a bg-[...] arbitrary value class you can use directly in Tailwind CSS.

Q: Can I make gradients with Japanese traditional colors?

Yes. There are 273 presets including many Japanese traditional-color (wa) gradients, and the “Pick from Color Dictionary” panel lets you apply traditional colors and CSS named colors directly to a stop.

Q: Can I save the gradient as an image?

Yes. Use “Export PNG” in the modal to download the current gradient as a PNG image.

CSS gradients come in three core types: linear-gradient(), radial-gradient() and conic-gradient(). This tool lets you pick a preset from the gallery, fine-tune the color stops in a modal, and copy both CSS and Tailwind code.

The three gradient types

Linear: blends along a straight line; set the direction with an angle. The go-to for buttons and headers.
Radial: spreads outward from a center point. Great for spotlights and soft backgrounds.
Conic: sweeps around a center by angle. Useful for pie-chart looks and color wheels.

How to use it

Pick a preset from the gallery (or “New gradient” to start from scratch).
In the modal, click the color-stop bar to add stops and drag the handles to position them. Double-click a handle to delete it.
Set the selected stop's color with the picker or from the Color Dictionary.
Adjust the type (linear / radial / conic) and the angle or shape.
Switch between CSS / Tailwind and copy the code, or export a PNG if you need an image.

Wa gradients & the Color Dictionary

The gallery includes 273 presets, with many built from Japanese traditional colors — akane red, wisteria, ultramarine, cherry, autumn maple and more. They are grouped by color category so they are easy to browse. The “Pick from Color Dictionary” panel applies traditional colors and CSS named colors straight to a stop, keeping the intent of the palette in your gradient.

FAQ

How do I copy the CSS gradient code?

Pick a preset to open the modal, choose the CSS or Tailwind tab, and press “Copy code” to copy it to your clipboard.

What is the difference between linear, radial and conic?

Linear blends along a line, radial spreads from a center, and conic sweeps around a center by angle. Switch with the type buttons in the modal.

Can it output Tailwind classes?

Yes. The Tailwind tab outputs an arbitrary value bg-[...] class.

Can I make gradients with Japanese traditional colors?

Yes — use the wa gradient presets, or apply traditional colors directly via “Pick from Color Dictionary”.

Can I save the gradient as an image?

Yes. Use “Export PNG” to download the current gradient as a PNG image.

How to Make Gradients