Softonic

CSS Form Generator

Step 1 / 2
Results

Forms are the most-touched part of most sites and the least-polished part of many. This generator outputs the CSS for a complete styled form: a responsive form grid, label + input pairs, textareas, selects and visible focus states, all in one consistent visual style. Set the accent colour, corner radius and gap, then copy the stylesheet. The CSS keeps native form semantics, so validation, keyboard use and screen readers all work.

How to use the generator

  1. 1

    Set the accent colour

    The accent colour drives the focus outline and border colour on every field.

  2. 2

    Choose the corner radius

    The radius applies to inputs, textareas and selects so they share one consistent shape.

  3. 3

    Set the gap

    The gap controls the vertical spacing between fields in the form grid.

  4. 4

    Copy the CSS

    A complete stylesheet you can paste and adapt, without touching your HTML.

The baseline form

<form class="form">
  <label class="field">
    <span class="field-label">Email</span>
    <input type="email" required>
    <span class="field-error">Please enter a valid email.</span>
  </label>

  <label class="field">
    <span class="field-label">Password</span>
    <input type="password" minlength="8" required>
  </label>

  <button type="submit" class="button">Sign up</button>
</form>

.field {
  display: block;
  margin-bottom: 1.25rem;
}
.field-label {
  display: block;
  font-weight: 500;
  margin-bottom: .25rem;
}
.field input {
  width: 100%;
  padding: .5rem .75rem;
  font: inherit;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #fff;
  transition: border-color 120ms, box-shadow 120ms;
}
.field input:focus-visible {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.field input:invalid:not(:placeholder-shown) {
  border-color: #dc2626;
}
.field-error { display: none; color: #dc2626; font-size: .875rem; margin-top: .25rem; }
.field input:invalid:not(:placeholder-shown) ~ .field-error { display: block; }

Four common styles

Style What it is Best for
Outlined Border around input, transparent background Desktop forms, dense layouts
Underlined Only a bottom border Minimal / editorial UI
Filled Grey background, no border Material Design-inspired UI
Floating label Label sits inside, animates up on focus/value Mobile-first, landing pages

Floating-label is prettiest but requires extra markup or JavaScript to detect empty state. Outlined is the most universal.

Accessibility checklist

  • Visible label for every input. Never use placeholder as the only label, it disappears on focus and fails contrast.
  • <label for> or wrapping <label>. Both are valid; wrapping is slightly easier.
  • Focus indicator. Never outline: none without a replacement. Keyboard users need it.
  • Error messages: link them via aria-describedby on the input. Do not use colour alone to mark errors, include a text message or icon.
  • Required fields: use required attribute. Add a visual marker (asterisk) in the label for sighted users.
  • Input types: use type="email", type="tel", type="url", type="number". Mobile keyboards adapt.
  • autocomplete attributes: autocomplete="email", autocomplete="current-password", etc. Saves users a lot of typing.

Native validation states

CSS has pseudo-classes for form validity:

  • :required / :optional
  • :valid / :invalid
  • :in-range / :out-of-range (for numeric inputs with min/max)
  • :placeholder-shown (empty, placeholder visible)
  • :user-invalid (invalid and user has interacted, the right one for error styles)

The :user-invalid pseudo-class is the cleanest way to show errors only after the user has done something, avoiding pre-interaction red borders. Support landed in all majors around 2023.

Disabled state

.field input:disabled {
  background: #f3f4f6;
  color: #9ca3af;
  cursor: not-allowed;
}

Disabled inputs are not focusable or submittable. If you want them focusable for screen readers, use readonly instead, form submits the value but the user cannot edit it.

Frequently Asked Questions

No. Placeholders disappear as soon as the user types, so they cannot serve as labels. Also placeholder text typically has low contrast and fails WCAG. Use a visible label plus an optional placeholder for format hints.

Because :invalid applies immediately to empty required fields. Use :user-invalid (interaction-aware) or combine :invalid:not(:placeholder-shown) as a workaround in older browsers.

Set appearance: none, remove the default arrow, add your own via a background image or a wrapping span with a pseudo-element arrow. Option lists inside remain OS-styled and cannot be customised with CSS.

Both. HTML validation (required, type, pattern) catches simple cases with no JavaScript. JavaScript handles complex rules (password strength, cross-field dependencies). Always server-validate too, client-side validation is for UX, not security.

Related Tools

ASCII Table Reference

Full ASCII table from 0 to 127 with decimal, hex, octal, binary, standard names and HTML numeric-reference notation, including NUL, LF and DEL.

HEX Color Picker

Pick or enter a HEX colour and get RGB, HSL, approximate CMYK, relative luminance and contrast ratios against white and black.

Color Palette Generator

Generate monochromatic, analogous, complementary, triadic or tetradic color palettes from a base HEX color and export copy-ready CSS variables.

HTML Character Reference

Searchable list of HTML entities, their named and numeric codes, and a one-click copy for special characters and symbols.

FPS Counter

Measure browser FPS with requestAnimationFrame, smoothing, min/max frame rate, warnings and an optional graph. Runs locally with no upload or API.

JSON Formatter

Paste JSON to pretty-print with 2 or 4 spaces, minify it to compact output, or run a quick syntax check before copying the result.