Web Design Tools, CSS Generators, Responsive Design Calculators Web Design Tools, Responsive Design Calculators

Web Design
Made Easy

Calgentu is a series of web calculators and CSS generators that were built with the designer in mind, with easy navigation and quick access allowing you to improve efficiency and speed up production.

Calgentu provides an array of useful web tools from a responsive web design calculator, various CSS3 generators to a drag and drop form builder.

Drag & Drop Form Generator

Drag and drop form elements into place and style them to easily generate HTML & CSS3 web forms.

Use Tool

CSS3 Gradient
Generator

Quickly generate cross browser compatible CSS3 gradients that work back to IE7. Features color picker, angle options and preview panel.

Use Tool

Responsive Design Calculator

Convert your fixed grid into a responsive layout with percentage-based fluid columns of content. Uses the formula: target + context = result

Use Tool

Column
Calculator

The fastest way to calculate column and gutter size with visual preview to make your mock-ups pixel perfect.

Use Tool

Golden Ratio
Calculator

For designers who love the golden ratio, you can now instantly grab pixel dimensions for your layouts with a visual preview.

Use Tool

Box Shadow
Generator

Easily create CSS3 box shadows with all necessary vendor prefixes. Features adjustment sliders and preview panel to dial in your precise effect.

Use Tool

DRAG & DROP FORM GENERATOR

Input

<input class="textInput" type="text" name="inputName" value="Input Name"/>

<br />&lt;input class="textInput" type="text" name="inputName" value="Input Name"/&gt;
Textarea

<textarea rows="6" cols="35" name="textarea"></textarea>

<br />&lt;textarea rows="6" cols="35" name="textarea"&gt;&lt;/textarea&gt;
Radio

<input type="radio" name="radioBtn" value="radioBtn"/> Radio Button

<br />&lt;input type="radio" name="radioBtn" value="radioBtn"/&gt;
Checkbox

<input type="checkbox" name="checkBox" value="checkBox"/> Check Box

<br />&lt;input type="checkbox" name="checkBox" value="checkBox"/&gt;
Select

<select><option value="selectOption">Select1</option><option value="selectOption2">Select2</option><option value="selectOption3">Select3</option></select>

<br />&lt;select&gt;&lt;option value="selectOption"&gt;Select1&lt;/option&gt;&lt;option value="selectOption2"&gt;Select2&lt;/option&gt;&lt;option value="selectOption3"&gt;Select3&lt;/option&gt;&lt;/select&gt;
Submit

<input class="btn" type="submit" value="Submit"/>

<br />&lt;input class="btn" type="submit" value="Submit"/&gt;

Start Over

Input

Box Shadow




Button






Textarea

Select

Drop Form Elements Here

HTML

CSS

CSS3 Gradient Generator

CSS Code

Responsive Design Calculator

Clear Last Reset

CSS Code

/* apply a natural box layout model to all elements */
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

Column Calculator

Golden Ratio CALCULATOR

Box Shadow Generator

CSS Code