CSS Grab n' go editor

Visual editor for learning and quick CSS mocking

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
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!
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
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
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
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".