OneTaskBy Tim King · Updated
CSS Generator
Pick Only the Properties You Need, Then Copy or Download Clean CSS
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the CSS Generator works
This CSS generator writes a complete rule from the properties you choose. Type the selector, fill in only the properties you want, and the rule assembles itself in the
panel as you type — one declaration per line, two-space indent, trailing semicolons, a separate
:hover rule if you give it a hover colour or background. Leave a field blank to leave the
property out. The flex alignment fields only appear in the output when display is set to a
flex value, and values that browsers would reject are flagged in the status line. Copy the block
or download it as styles.css.
CSS generator: building a rule property by property
Most CSS generators on the web do one property: a shadow, a gradient, a border radius. This one writes the whole rule. It is for the moment you are sketching a component and want a clean starting block rather than typing eighteen property names by hand and hunting for the semicolon you forgot. It is deliberately plain: it emits exactly the properties you set, in a fixed order, and nothing you did not ask for.
Selector. Anything CSS accepts: a class (.card), an element (button), a compound
(nav a), an attribute selector (input[type="email"]) or a pseudo-class (li:first-child).
The tool does not validate the selector beyond requiring one, because there is no sensible way
to guess which selectors exist in your markup. If the rule does not seem to apply when you paste
it, the selector is the first thing to check.
Property order. Declarations come out in a conventional grouping: layout (display, size,
spacing), then paint (background, color), then type, then border and effects, then
interaction (transition, cursor). Fixed ordering is worth having in generated code because
it makes rules easy to scan and diff; if you follow a different convention in your codebase,
reorder after pasting.
Units and values. Every text field is passed through verbatim, so you can write 1rem,
clamp(1rem, 2vw, 1.5rem), var(--space-4) or calc(100% - 2rem) and it will land in the
output unchanged. The few properties with a closed set of legal keywords — display,
text-align, font-weight, opacity — are checked, and an impossible value produces a
warning in the status line rather than being silently emitted. The rule is still generated so
you can see and fix it.
Flex properties. flex-direction, justify-content, align-items and gap do nothing
on a block-level element, so they are only written when display is flex or inline-flex.
row for direction and normal for the two alignment properties are the initial values and are
skipped; setting them explicitly would be noise. If you need grid alignment, set display to
grid and add grid-template-columns and friends after pasting — the grid generator on this
site produces those.
Hover state. The two hover fields produce a second rule, selector:hover, containing only
background and color. Pair them with a transition on the base rule for a smooth change.
For focus styling, duplicate the hover block as :focus-visible so keyboard users get the same
affordance; do not rely on hover alone for interactive elements.
What it does not do. No vendor prefixes — every property here has been unprefixed in all current browsers for years. No minification — the download is meant to be read. No media queries or nesting — write the base rule here, then wrap or extend it in your stylesheet. And no preview: the properties are ordinary CSS you can paste straight into DevTools to see the result on your real markup, which is a more honest preview than a synthetic box.
FAQ
Why does the flex-direction field have no effect?
The flex fields are only written into the rule when display is flex or inline-flex, because
on any other display value they are ignored by the browser. Change display and the alignment
declarations appear immediately.
Can I use CSS variables and functions?
Yes. Text fields are copied verbatim, so var(--brand), calc(100vh - 4rem), clamp(),
min() and max() all pass through untouched. Only the properties with fixed keyword lists are
checked, and even those are still emitted with a warning rather than dropped.
Why is there no visual preview?
A preview box can only show the properties in isolation on a synthetic element, which rarely matches how the rule behaves on your real markup with its inherited styles. Pasting the generated block into the browser's DevTools styles panel gives an accurate preview in seconds, so the tool concentrates on producing clean code.
Does the generator add vendor prefixes?
No. Every property on the form — including transition, box-shadow, border-radius and
flex — is supported unprefixed in every browser still receiving updates. Adding -webkit- or
-moz- variants would only bloat the stylesheet.
How do I add a focus style as well as hover?
Generate the rule with your hover colours, then copy the :hover block and change the selector
to :focus-visible. That gives keyboard users the same visual feedback as mouse users without
showing a focus ring on ordinary clicks.
See also: all UI Components tools, Layout & Spacing, Shadows & Motion, Shapes & SVG, Forms & Inputs, Colour.
Related tools
Box Shadow Generator
Stack several shadow layers for depth that looks real.
Border Radius Generator
Per-corner border-radius with shorthand and longhand output.
Gradient Maker
Linear, radial and conic CSS gradients with live preview.
Flexbox Playground
Live flexbox layout playground that exports the container rule.
CSS Transform Generator
Compose translate, rotate, scale and skew into one transform value.