Processed locally in your browser — nothing you enter here is uploaded.

Website Design Simulator and CSS Theme Builder

Use the collapsible control sidebar to adjust visual tokens, sections, typography, copy, and device size without taking space away from the live preview.

Design controls

Adjust the design while the preview remains visible beside this panel.

Theme preset

Page background

Text

Muted text

Accent

Card

Header

Borders

Background pattern

Live webpage preview

The preview stays beside the controls and scrolls independently.

New: Team planning now includes automated weekly summaries →

Northstar

Built for focused teams

A clearer way to move your work forward

Plan projects, align your team, and turn good ideas into measurable progress without adding more meetings.

42%less status work

3.4×faster planning

91%weekly adoption

18hsaved per team

Everything in one place

A calmer operating system for your team

1

Project briefs

Keep the context, owner, and next action visible without another status meeting.

2

Smart timelines

Keep the context, owner, and next action visible without another status meeting.

3

Team rituals

Keep the context, owner, and next action visible without another status meeting.

4

Progress signals

Keep the context, owner, and next action visible without another status meeting.

5

Decision log

Keep the context, owner, and next action visible without another status meeting.

6

Shared priorities

Keep the context, owner, and next action visible without another status meeting.

“The team finally has one place that makes priorities obvious without turning planning into a second job.”

Maya Chen · Head of Product at Luma

Give every project a clearer next step

Start with a ready-made workflow, then adapt it to the way your team already works.

Generated design tokens and CSS

Copy the variables into a project and adapt the component class names to your markup.

:root {
  --page-bg: #f7f7fb;
  --text: #18181b;
  --muted: #71717a;
  --surface: #ffffff;
  --header: #ffffff;
  --accent: #7c3aed;
  --accent-text: #ffffff;
  --border: #e4e4e7;
  --radius: 18px;
  --shadow: 0 16px 40px rgb(24 24 27 / 0.10);
  --content-width: 1120px;
  --section-gap: 72px;
  --section-padding: 56px;
  --base-font-size: 16px;
  --line-height: 1.6;
  --letter-spacing: -0.02em;
}

body {
  margin: 0;
  background: var(--page-bg);
  color: var(--text);
  font: var(--base-font-size)/var(--line-height) Inter, ui-sans-serif, system-ui, sans-serif;
}

.site-container { width: min(calc(100% - 3rem), var(--content-width)); margin-inline: auto; }
.site-section { padding-block: var(--section-padding); }
.site-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.site-heading { letter-spacing: var(--letter-spacing); }
.site-button { border-radius: 14px; }

Adjust controls without losing the preview

On desktop, this simulator uses a collapsible control sidebar beside a live webpage preview. The sidebar opens by default so the design options are ready to use; collapse it whenever you want to give the simulated window even more room. The preview canvas scrolls independently when the simulated page is taller or wider than the available space. On smaller screens, the full controls and preview stack vertically so neither panel becomes cramped.

Switch between desktop, tablet, and mobile widths to compare the same design direction. The preview adjusts navigation, column counts, hero composition, spacing, statistics, pricing, and calls to action for the selected device.

Theme and component controls

Start with a preset, then customize:

Page, text, muted text, surface, header, accent, and border colors.
Grid or dot background patterns.
Content width, section spacing, card radius, shadow, and feature count.
Solid, outline, or soft buttons and contained, full-width, or transparent headers.
Sans-serif, serif, classic, and monospace font stacks.
Base size, heading scale, line height, and letter spacing.

These controls are design tokens rather than an unrestricted CSS executor. The simulator does not run pasted CSS or JavaScript.

Page structure and realistic copy

Toggle an announcement bar, statistics, testimonials, pricing, final call to action, and footer. Edit the brand, headline, supporting paragraph, and primary button to judge the theme with copy closer to a real landing page.

The preview is a structured prototype, not a drag-and-drop production site builder. It helps compare direction and proportions before implementing the final responsive HTML and component behavior.

Exporting the design

The generated CSS includes variables for colors, surfaces, borders, radius, shadow, content width, spacing, and typography. Copy or download the stylesheet, then map the example classes to your project's markup. Check color contrast, keyboard states, responsive behavior, and content length in the finished product.

Privacy and related tools

All edits remain in the browser and are not uploaded to MiniUtil. Use the Color Picker to inspect precise color values, the Box Shadow Generator for a more detailed shadow, or the Google Preview to review search-result copy for the finished page.

Share this utility

Send the tool, not any text or files you entered. Input is never added to the share URL.

Where this comes from

Sources and standards

W3C: CSS Color Module Level 4
Defines the colour notations produced and how they convert.
MDN: CSS reference
The properties the exported styles are built from.

Links last checked August 13, 2026.

Keep working

Related Design Tools

View all design tools

Color PickerPick and convert colors.Box Shadow GeneratorGenerate CSS box shadows.Google PreviewPreview how your page appears in Google.Permissions-Policy BuilderControl browser features with HTTP headers and iframe allow attributes.