Grab n'go CSS editorVisual editor for learning and quick CSS mockingFirst released:31 Jul, 2016Last updated:This tool is made for quick prototyping, mocking, and learning CSS via tinkering its properties. The editor is capable of generating valid and prefixed 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 leftHistory holds up to 100 recordsUse keyboard shortcuts to navigate history, undo, redo changes, and replay working progressSmart 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 URLBe aware: complex creatives can generate long URLsInstall 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 elementsbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-repeatbackground-sizebackground-positionbackground-position-xbackground-position-youtlineborderborder-topborder-bottomborder-leftborder-rightborder-radiusborder-bottom-left-radiusborder-bottom-right-radiusborder-top-left-radiusborder-top-right-radiusbox-shadowbox-sizingcolordisplayfilter— blur, brightness, contrast, drop-shadow, grayscale, hue-rotate, invert, opacity, saturate, and sepiafont-familyfont-sizefont-weightwidthheightletter-spacingline-heightline-breakmix-blend-modeobject-typeopacityoverflowoverflow-xoverflow-yoverflow-wrappaddingperspectivetext-aligntext-align-lasttext-decoration-colortext-decoration-linetext-decoration-styletext-decoration-thicknesstext-indenttext-shadowtext-stroketext-stroke-colortext-stroke-widthtext-transformtransform— rotate, scale3d, skew, and translate3dwhite-spaceword-breakword-spacingword-wrap👨🎨 Pre-styled creatives for inspiration:✨Unlock Magic🔖Bookmark icon🔲Call to action button▲Triangle🖼Text image clipping📋Lined out paper sheet🖥Landing page text👾Pink Skull📝Textarea form element🎲Dice 2🎲Dice 3🎲Dice 4🎲Dice 5🎲Dice 6Created 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:TwitterFacebookand give us thumb up on Facebook🏆 Achievements:Product #1 of the day (18 Apr, 2020) on ProductHuntFeatured on Hacker News front pageFeatured on hckrnews.comFeatured in "A Fresh Cup" newsletterFeatured in Frontend focus newsletterFeatured in Indie Hackers newsletterFeatured in ProductHunt newsletterFeatured in What a tool! newsletterFeatured on Top Hunts Time Machine (17 Apr, 2020)Highlighted in NxWorld postFeatured in Web Design Trends newsletter16,000 monthly returning users👨💻 Made with:☄Meteor.js📦meteor-build-client📦ostrio:base64📦ostrio:templatehelpers📦seba:minifiers-autoprefixer📦fourseven:scss📦mquandalle:jade📦fps-m📦ClientStorage📦autoprefixer📦color📦cssbeautify📦jsonpack📦FontAwesome icons