Today we present a useful tool for your CSS styles: CSSmatic makes it easier to code new features in CSS3 such as borders, shadows, textures or gradients.As graphic developers, CSSMatic founders Alejandro Sánchez Blanes (Freepik) and Joaquín Cuenca (Panoramio and Thumbr.it) used to spend hours coding. With the aim of solving their problems they developed CSSmatic, a free online kit made by developers for developers.
All you have to do is copy the resulting code and paste it into your website.
It was developed using JavaScript in order to help designers to easily create and apply gradients, borders, textures and shadows. It works simply and intuitively, so it can be used by both professionals and beginners. The idea is also to add new functionalities to CSSmatic to make it a complete online CSS suite for developers.
The gradient generator tool is the most used tool in CSSmatic, and helps you create multiple color gradients by playing with opacities in Photoshop style, with smooth color changing style or subtle transparencies. It can integrate more than two colors, you choose the color-format and adjust lightness, hue and saturation, and you can export the code to CSS and Sass. You can even include code comments.
The border radius tool allows you to create text boxes with rounded borders, all of them or one at a time. You control the curvature, border width, color and background. You can also choose different styles: solid, dotted, dashed, double, groove, ridge, and more.
The Noise Texture tool lets you drag and push together a colored texture to your background and export it as a PNG plus CSS. You can easily control opacity, density, background and noise color and export transparency and the pixel dimensions of the PNG.