CSS tools

  • px to em This tool is what its developers call “px to em conversion made simple”. Type a base font size in pixels, and the tool will produce a complete pixel to em conversion table, making elastic Web design much easier to produce.
    • JS Bin A Web app specifically designed to help JavaScript and CSS folk test snippets of code in a particular context and debug the code collaboratively. It allows you to edit and test JavaScript and HTML (reloading the URL also maintains the state of your code: new tabs don’t). Once you’re happy, you can save and send the URL to a peer for review or help. They can then make further changes, saving anew if required. Alternative: CodePaste or EtherPad.
  • CSS Text Wrapper The CSS Text Wrapper allows you to easily make HTML text wrap in shapes other than just a rectangle. You can make text wrap around curves, zig-zags, or whatever you want.
  • CSS Sprite Generator With this tool, you can upload all of your images (you have to place them in a .zip file first) and it will combine the uploaded images into a single sprite and generate the CSS for you
  • Grid Designer 2.4 This tool enables you to create a grid by specifying the number of columns and the widths of the columns, gutters and margins. You can also specify typography in the same tool and export the final CSS and (X)HTML markup. You can also bookmark your grid and typography settings and create designs with spanning columns. Created by Rasmus Schultz.
  • GridFox GridFox is a Firefox extension that overlays a grid on any website. If you can open it in Firefox, you can put a grid on top of it. It’s easy to customize and allows you to create the exact grid you based your layout on.
    • AWK AWK is a very powerful programming language that you can use on the command line for advanced text processing.
  •  CSS Arrow Please!

    This tool helps you create and export code for custom boxes with an arrow extending from any side.

  • 3. CSSmatic

    This all-in-one tool lets you:

    • Generate gradients: Use multiple colours and opacity stops to get amazing gradients
    • Border radius: Super easy to use and a super time saver. Change all the borders selected at the same time.
    • Noise texture: Create subtle background patterns with dirty pixels and noise, changing the colour and values and previewing the results in real-time
    • Box shadow: Blur radius changes, colour changes, and shadow size — everything that you need to create great drop shadows in a single place

  • 4. Patternizer and Patternify

    Both of these tools let you create awesome patterns with CSS in a user-friendly interface. With the help of these tools, you can create cool patterns that can easily be implemented onto your website, as it’s directly written in CSS.

  • 7. Compass:

    Sophisticated and quick in performance, user and developer friendly, trusted by hundreds of users across the globe, Compass is more than just CSS generator or preprocessor. The developers of Compass position it as a design framework using Sass syntax (.sass or .scss).

    Whether you want to create eye catchy typographic or vertical rhythms or extensions, make CSS3 or sprites, Compass makes the whole work as easy as a pie

  • 8. SCSS Compiler:

    SCSS Compiler is an amazing webapp under BeautifyTools to generate CSS styles from SCSS code. With this tool you are free to beautify or minify the compiled CSS whenever necessary. You will be able to combine different files together as well.

    All in all, this fantastic online instrument is developed and launched to be a valuable contribution to your CSS workflow. SCSS Compiler is also feature rich with every single element you’ll need, so that the creation and designing of your site will be a breeze

  • Tailwind is what’s called a utility-first CSS, which differs from what we do in our everyday workflows: semantic CSS. The difference between semantic CSS and utility CSS is that the former tries to groups style elements by the name of the visual sections that appear on the page. So, if you have a navigation menu, cards, carousel, etc., on a page, the semantic way of doing things would be to group CSS style rules under classes such as .nav, .card, .carousel, etc., which their sub-sections labeled accordingly (for example, .card-body, .card-footer, etc.). This is by far the most common approach to CSS, and we all are familiar with it through frameworks like Bootstrap, Foundation, Bulma, UI Kit, etc.
  • SAAS      When we write HTML, we nest elements inside other elements. But when writing CSS, we have to write a flat hierarchy of rules, which makes it hard to mentally “fit” the CSS onto the HTML. With Sass, you can mimic the page structure inside your style filesAll this doesn’t even begin to scratch the surface of the goodies Sass offers: modular design, include files, mixins, inheritance . . . the list goes on and on. Sure, you’ll need to learn a Sass compiler workflow and include it into yours, but in my opinion, that couple of hours spent is an investment that will pay you over and over!

  •  File watchers & Compilation – grunt-watch

  • Less CSS

    lesscss.org
    js, the JavaScript tool that converts your Less styles to CSS styles. Because Less looks just like CSS, learning it is a breeze. Less only makes a few convenient