First released: 31 Jul, 2016

Last updated: 27 May, 2020

This tool is made for quick prototyping, mocking, and learning CSS via tinkering its properties. The editor is capable of generating valid and prefixed, when necessary, CSS, SASS, SCSS, and LESS code compatible with all browsers.

Enjoy creating and sharing your creatives with this tool. If you are missing a tool or something is broken, we are here for you — reach us out by one of the social links below.

This project is mobile-friendly and fully-featured PWA, try it on a smartphone, or "Add to Home Screen" so this tool will always be in your pocket, even when you're offline or away from the keyboard.

⌨️ Keyboard shortcuts:

Undo: [ ctrl ]+[ z ] | [ cmd ]+[ z ]

]+[ ] | [ ]+[ ] Redo: [ ctrl ]+[ shift ]+[ z ] | [ cmd ]+[ shift ]+[ z ]

💡 Tips:

For presice slider positioning use [ ← ] and [ → ] keyboard keys; this works on activated (yellow color) slider; to activate slider click on it or click on icon on the left

] and [ ] keyboard keys; this works on activated (yellow color) slider; to activate slider click on it or click on icon on the left History holds up to 100 records

Use keyboard shortcuts to navigate history, undo, redo changes, and replay working progress

Smart shadows for text and box elements! Create 3 shadows within same pattern in a row (same gaps/steps between x , y , spread , and/or blur ) and next new shadows will follow the same pattern!

and elements! Create 3 shadows within same pattern in a row (same gaps/steps between , , , and/or ) and next new shadows will follow the same pattern! Creatives shared via URI; its styles encoded right into URL

Be aware: complex creatives can generate long URLs

Install this webapp on a smartphone via "Add to Home Screen" option. It works offline!

📋 Available properties:

appearance — apply styles to different DOM elements, like div , span , img , input , checkbox , radio , select , textarea , and group of elements

— apply styles to different DOM elements, like , , , , , , , , and group of elements background-blend-mode

background-clip

background-color

background-image

background-origin

background-repeat

background-size

background-position

background-position-x

background-position-y

outline

border

border-top

border-bottom

border-left

border-right

border-radius

border-bottom-left-radius

border-bottom-right-radius

border-top-left-radius

border-top-right-radius

box-shadow

box-sizing

color

display

filter — blur , brightness , contrast , drop-shadow , grayscale , hue-rotate , invert , opacity , saturate , and sepia

— , , , , , , , , , and font-family

font-size

font-weight

width

height

letter-spacing

line-height

line-break

mix-blend-mode

object-type

opacity

overflow

overflow-x

overflow-y

overflow-wrap

padding

perspective

text-align

text-align-last

text-decoration-color

text-decoration-line

text-decoration-style

text-decoration-thickness

text-indent

text-shadow

text-stroke

text-stroke-color

text-stroke-width

text-transform

transform — rotate , scale3d , skew , and translate3d

— , , , and white-space

word-break

word-spacing

word-wrap

👨‍🎨 Pre-styled creatives for inspiration:

Created something amazing? We will add your "style" to our list and will mention you! Just tweet a link to your creative mentioning @veliovgroup .

Create your styles and share them with the Internet and friends. Click on any style language at the top of the sidebar, then click on "copy share link".

🗣 Tell friends about this project via:

🏆 Achievements:

👨‍💻 Made with: