The difference between linear, radial and conic CSS gradients, editing color stops, getting CSS / Tailwind code, and using Japanese traditional-color gradients with the Color Dictionary.
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.
Use the “Apply to” switch at the top of the modal to decide whether the gradient fills the background or the text itself. You never have to rebuild the gradient — and the generated code changes automatically.
When Text is selected you can type your real heading into the preview, and pick a font from Google Fonts (mincho, gothic, rounded, Latin display). Longer strings and heavier faces change how the gradient falls across the letters, so it is worth checking with the exact wording and typeface you plan to ship.
Gradient text works by painting the gradient as a background, clipping it to the glyph shapes with background-clip: text, and making the text fill transparent. A bare CSS declaration will not work on its own — you need an element to apply it to — so the output bundles the HTML and the font import as well. Copy it and it runs:
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@700&display=swap" />
<h2 class="gradient-text">Gradient Text</h2>
<style>
.gradient-text {
font-family: "Zen Maru Gothic", sans-serif;
font-weight: 700;
background-image: linear-gradient(135deg, #b7282e 0%, #f6d8a8 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>
-webkit-background-clip is still required in Safari and some other environments, so it is emitted alongside the standard property. -webkit-text-fill-color is used instead of color: transparent because it applies more reliably and keeps text selection readable. Choosing Tailwind collapses the same thing into one class-laden line: font-['Zen_Maru_Gothic'] font-bold bg-[...] bg-clip-text text-transparent.
In text mode, “Export PNG” follows the letter shapes and saves a PNG with a transparent background, ready to drop onto banners or thumbnails.
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.
Pick a preset to open the modal, choose the CSS or Tailwind tab, and press “Copy code” to copy it to your clipboard.
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.
Yes. The Tailwind tab outputs an arbitrary value bg-[...] class.
Yes — use the wa gradient presets, or apply traditional colors directly via “Pick from Color Dictionary”.
Yes. Set “Apply to” to Text in the modal and the output switches to gradient-text CSS (background-clip: text). Any gradient you built for a background works on text as-is, and the output includes the HTML and font import so it runs as pasted.
Yes. With Text selected, “Export PNG” saves a transparent PNG cropped to the letter shapes.
Yes. Use “Export PNG” to download the current gradient as a PNG image.
Yes. Selecting Text reveals a font picker with Google Fonts (mincho, gothic, rounded and Latin display faces). The chosen font applies to the preview, the generated code and the PNG export, and the output includes the matching <link> import.