CSSmatic is the non-profit best CSS tool for web designers. There are four useful tools at the moment. You can use the Gradient Generator, which supports multiple colors and opacity levels to get amazing gradients. Using the Gradient Tool, you can create gradients with smooth color change effects and subtle transparency.
Border Radius is super easy to use and a huge time saver. Change all selected borders at once. Noise Texture helps you create subtle background patterns with dirty pixels and noise by changing the color and value and seeing the results in real time. Box Shadow supports changes in blur radius, color, and shadow size. Everything you need to create great shadows in one place.
CSS Matic, originally created to free up the Freepik team, is now available to the world. And the world, at least its CSS creation subset, will be more than happy about it, as CSS Matic is capable of replacing a number of other tools to consolidate your workflow into one service. What I like the most is that you can literally feel the freshness of the tools, especially their user interface. If you’ve been working with long-time competitors, you’ll know what I mean as soon as you set your eyes on CSS Matic.
CSS Matic – gradients, borders, shadows, textures
We have to admit that CSS Matic is not a one-piece service. The four parts of the service differ in functionality and complexity, as well as in finish and style. It is not surprising that the first tool, Gradient Generator, takes the first place in the presentation on the website.
The Gradient Generator leaves the other tools behind. The Gradient Generator has many features and is extremely well thought out and detailed. You can design gradients from a variety of predefined styles or completely from scratch. Gradients can integrate more than two colors and drag and shift together using visual anchor points. You choose the color format, adjust the hue and saturation, and more. When you’re happy with your gradient, you can export it to CSS and Sass. You can add comments to the exported code. This way, you won’t get lost later, even if you don’t breathe CSS every day.
Border radius
Much less complicated but no less useful is the Border Radius tool. It allows you to create CSS borders. You can visually define these borders for each edge individually or for all four in one motion. The generated CSS code changes in real time as you change the parameters. You can copy and paste it into your own projects using copy and paste.
Noise texture
With Noise Texture, you visually drag and drop a texture on a colored or transparent background, then export it as a PNG with CSS. The background color, noise color, transparency, and density can all be set as easily as the size of the resulting PNG in pixels.
