• Online Tools:
  • CSS Triangle Generator
  • Flexbox Playground
Front-End Box

Front-End Box

A set of CSS generators and tools

FRONT-END BOX

A set of CSS generators and tools

It's a local application.
No internet connection needed.
Native app.
Native speed.
Color Schemes.
For early risers and night persons.

CSS Triangle Generator

Handy tool for

CSS Triangles

code generation. You can set any direction, one of the three triangle types (equilateral, isosceles, scalene), size and the color. Just grab the result and use it in your code!

front-end-box:~ user$ try online

CSS Triangles Generator

Flexbox Playground

Using

Flexbox Playground

tool you can check all combinations of the Flexbox CSS property and choose the one suitable your situation. What the `align-content` stands for? How will the element change being `flex-shrink`ed? So many questions...

Flexbox Playground

has all answers!

front-end-box:~ user$ try online

Flexbox Playground

Base64 Encoder

The

Base64 Encoder

tool does the following:
  • font to Base64
  • image to Base64
You can grab output as HTML or CSS (raw Base64 string is also available) with proper MIME types. That's all what

Base64 Encoder

tool does, but it does it perfectly!
BASE64 Encoder

Web Fonts Converter

The

Web Fonts Converter

tool converts the fonts and produces the set of compiled fonts and CSS file with proper styles. Supported formats are:
  • ttf to woff
  • ttf to woff2
  • ttf to base64
  • otf to woff
  • otf to woff2
  • otf to base64

Web Fonts Converter

converts to all modern fonts formats, including WOFF2, base64 option is also supported. You can set the font files and @font-family names for each font you add.
Web Fonts Converter

Image Optimizer

The

Image Optimizer

tool optimizes all main formats images - JPG/JPEG, GIF, PNG and SVG.

Image Optimizer

saves from 30% to 85% of file size (depending on source). Make your web pages load faster with "real" sizes of the images!
Image Optimizer

Coming soon:

CSS Gradients Generator

CSS Gradients Generator will help you to get the code for any linear, radial and striped gradient.

Also you can try out our free app:

(includes Triangles Generator, Flexbox Playground and BASE64 Encoder)