New features and changes in CSSexy, newest first.
Stylepacks — colour shade variables. Turn your stylepack colours into a Tailwind-like palette. On the stylepack's Colors tab, click Create color shade variables: each colour becomes eleven CSS variables from light to dark, --color-red-50 to --color-red-950, with your colour as the 500. They're added to the class named after your snippet, for example .my-card-main. Assign that class to your top element and use the shades anywhere inside it, for example var(--color-red-200). With Tailwind v4, classes like bg-red-500 pick them up too.
Booklets — redesigned. A booklet is a small website made of snippets: one root that holds the CSS, stylepack, name and folder, and any number of pages. Start one in the new Booklets section with Add booklet. In Pages › Tree you add, copy, move, nest and delete pages, and bring HTML into them with Code import or Snippet import. Update page CSS and SVGs copies the root's styles to every page. Publish puts the whole booklet online, with the first page at cssexy.com/your-folder and every page at its own address. On a page, Add HTML › Booklet › Booklet TOC inserts a table of contents that marks the current page. In the Editor, the snippet list now groups each booklet with its pages.
Email mode. Switch on Email in a stylepack, and the Editor only offers HTML and CSS that works in all email clients, based on caniemail.com. The Email preview shows your snippet as a ready-to-send email, with all CSS inlined, and lists anything that was left out. Copy gives you the complete email. Table cells and tables get an align attribute, the way to centre a table that works everywhere, Outlook included. A few properties that some clients only ignore, like border-radius, are allowed with a note naming those clients.
Code import — more CSS and SVG. Pasted code now brings in clip-path and mask shapes, grid-area and grid-template-areas, content and counters, background and mask shorthands, SVG colour matrix filters, and shorthands with one to four values. Text in pasted HTML is shown as Markdown in the import box.
More CSS. Units and calc() for stroke-width, a second and third keyword for position, and transition with several transitions you can add and remove.
Media library. Pick uploaded images, videos and audio from a picker instead of typing a URL. Media type fields suggest the right types for their element.
CSS nesting. Nested selectors are written as real nested CSS, like .card { .title { … } }. Comma groups like .a, .b { … } have their own button in the item tree.
Code import — tidy before you import. Remove Tailwind classes drops the pasted CSS rules for standard Tailwind utility classes, and Remove unused CSS drops rules that match nothing in the pasted HTML.
Tailwind — variables and @apply. Assign Tailwind's CSS variables to your properties, and use @apply as its own field.
SVG inside HTML. Put an <svg> straight into your HTML, with classes working across both.
Shorthand fields. border-radius, margin, padding and inset can be set for all corners or sides at once.
Tailwind classes. Assign Tailwind classes to HTML and SVG items. Tailwind 4 is the default for new snippets.
Undo and redo. Undo and redo your edits in the Editor, up to 50 steps.
Gallery — download snippets. Signed in, you can download other people's snippets from the Gallery into your own snippets.
Colours. Colour fields can be written in the format you choose: HEX, RGB, HSL or OKLCH. Colour-mix mode shows a live preview.
More CSS. place-self, separate fields for underline, overline and line-through, and direction keywords for linear gradients.
Editor — preview while you edit. The HTML, SVG and property editors show a preview of the item you're editing. The preview toolbar has a split screen, size settings, and a search in the add and property pickers.
cssexy.com. CSSexy moved to cssexy.com, with privacy settings you can change at any time.