CSSmatic, the Great Visual CSS3 Tool

Create CSS3 gradients, borders, shadows and noise

  • Share on Google
  • Share on Stumbleupon

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.

Awwwards

By Awwwards Team

Awwwards – recognizing the talent and effort of the best web designers, developers and agencies in the world. We aim to create a meeting point where web professionals from across the world can come to find inspiration; a space for debate; a place to share knowledge and experience; give and receive constructive and respectful critiques. “Always hungry”.

awwwards.com

6 7 8 9 10
CLOSE