Design mockups and graphics with CSS, quick and easy.

An elegant way to design with CSS.

UltraCSS is for those who know CSS but find designing with CSS to be cumbersome. You might find that HTML takes a long time to write, or that linking CSS classes with HTML elements slows the design process down.

Being 100% sure your padding is 32px, or that your margin is 1.5rem allows you to free yourself from pixel paranoia. Design knowing the exact dimensions of your elements.

Create social media post templates, resumes, posters, UI mockups, or whatever graphic you can think of with UltraCSS.

Features

Write HTML without writing HTML

Without UltraCSS

<div class="container">

 <div class="nav">

  <div class="itemA primary"></div>

  <div class="itemB"></div>

  <div class="itemC"></div>

 </div>

</div>

With UltraCSS

.container

 .nav

  .itemA.primary

  .itemB

  .itemC

Create variables for reusable CSS

Without UltraCSS

/* You can't define properties or

entire chunks of CSS as variables,

so only var(--blue) can be defined. */

:root {

 --blue: #4492C6;

With UltraCSS

$blue = "#4492C6";

$flexCenter = "

 display: flex;

 align-items: center;

 justify-content: center";

$centerBg = "

 background-size: cover;

 background-position: center";

$pt = "padding-top";

$pb = "padding-bottom";

Style elements with ease

Without UltraCSS

display: flex;

align-items: center;

justify-content: center;

color: var(--blue);

background-image: url('https://example.com/x.jpg');

background-size: cover;

background-position: center;

height: 1.5rem;

padding-top: 0.75rem;

padding-bottom: 0.5rem;

With UltraCSS

$flexCenter;

background-image: cat;

text: Check out my cute cat!;

color: $blue;

$centerBg;

height: 1.5rem;

$pt: 0.75rem;

$pb: 0.5rem;

Upload images for easy use in your projects

Import Google fonts

Save projects to your account

Over 1,600 Material Design and Bootstrap icons included

Pricing

Free (for now). UltraCSS may become a paid service in the future.