#StopWarInUkraine Save the children

The awards of design, creativity and innovation on the internet

Magazine for designers and web developers

CSSmatic, the Great Visual CSS3 Tool

Article by Awwwards in Resources & Tools -

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.

  • CSSmatic automatically generates the code and shows you the effects in real time.

    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.

    But, how does it work? Here are some examples:

  • Gradient generator

    Gradient generator

    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.

  • Border Radius Tool

    Border Radius Tool

    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.

  • Noise texture

    Noise texture

    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.

  • Shadows editor

    Shadows editor

    The box shadows complete the design. You can control the width and height of the shadow, which can be internal or external. With color, CSSmatic lets you choose the hue of the shadow box and its opacity.