Generate CSS visually

Four bits of CSS everyone writes by trial and error, with the trial and error done on sliders instead of in your stylesheet.

Runs entirely in your browser
Works offline
No upload
No sign-up
No watermark

Loading the tool…

How it works

Pick the panel: gradient, shadow, corners or fluid size.
Drag until the preview looks right.
Copy the CSS line out.

Why nothing is uploaded

Every operation on this page is done by code running inside your browser tab, using the same engine that renders web pages. The file is read from disk into your tab’s memory, transformed there, and written back out as a download. It is never sent anywhere — not to us, not to a third party.

Verify it yourself

Open your browser’s developer tools (F12) and select the Network tab.
Load your file and run the tool.
The only requests you will see fetch the tool’s own code — and, for a few heavy tools, their open-source engine from a public CDN — plus one small page-view ping to loreatec.jp (page address and title, nothing more). None of them carry your file.

Proof it stays local →

Frequently asked questions

What does the clamp() panel actually compute?

The linear slope. You say “16px at 360px viewport, 32px at 1280px” and it emits clamp(16px, 8.3px + 2.17vw, 32px) — the value scales smoothly between your two widths and stops at both ends. The formula is simple and nobody remembers it; that is the whole tool.

Why do the shadow presets look better than my hand-written shadows?

Because realistic shadows are lower-opacity, larger-blur and slightly negative-spread than intuition suggests. The presets encode those proportions; start from one and adjust, rather than from 0 0 5px black.

Can I make the uneven, organic corner shapes?

Tick the per-corner option and set the four radii separately — large opposite corners give the leaf/blob shape. For fully organic blobs you need the two-value radius syntax, which is beyond this panel; what is here covers the shapes people actually ship.

Is anything sent anywhere?

No. The preview is a div with your styles applied to it — the most local thing a tool can possibly do.