Blob Notebook
Switch guideCSS editor

CSS EDITOR

Keep the CSS patterns you want to use again.

Save a grid layout, a set of custom properties, or a carefully adjusted media query. Use a CSS source editor with local saving to keep small stylesheet ideas organized.

Open editor

Free to use · No account needed · Saved in this browser

cards.css CSS
:root {
  --card-gap: 1rem;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--card-gap);
}
A responsive card grid to adapt to your own markup and available space.Try this example

EDIT IN YOUR BROWSER

Your local draft

The notebook’s editing tools, right here. Save to notebook when you want a named copy.

Open full editor

Enable JavaScript to edit here, or open the full editor above. The example and guide are always available.

This draft is shared with the full editor for this task and stays separate from named notes. Export a copy or save to notebook to include it in a notebook backup. This editor page and its tools reopen offline after the editor reports readiness. Informational and privacy guides need a connection.

A FEW SIMPLE STEPS

Get started

  1. Create a note and select CSS or import a .css file.
  2. Edit the rules and use Format in the code tools when you want readable layout.
  3. Save a reusable selection as a snippet, or compare it with an earlier version.
  4. Download the CSS source and test it with your actual HTML.

Open editor takes you to the draft on this page. Paste or open a source file, or choose Try this example. Save to notebook keeps a named copy with your notes. Your workspace style stays unchanged.

Make a stylesheet easier to review

Choose CSS to highlight selectors, declarations, and values. Use Format to tidy supported CSS, find and replace repeated custom property names, and compare two revisions when a small change affects many rules.

Give a reusable snippet a descriptive title such as “card grid” or “focus ring”. Comments about the intended HTML structure help when you paste it into a project later.

Preview CSS with the HTML it belongs to

A standalone CSS note edits source; it is not automatically applied to another note. To inspect a small visual example, put the rules inside a style element in an HTML note and use that note’s sandboxed preview.

Browser support, cascade order, and inherited styles depend on the final page. Test the downloaded stylesheet in the project where you will use it.

A few questions

Can I preview a CSS file by itself?

CSS needs markup to style. Use an HTML note with a style element for a small preview, or copy the stylesheet into your own web project.