Essential tools for web layout (web develpment)

This page contains the most common tools in web development. Most tools are CSS code generators. These tools will help you in some of the layout tasks that you may encounter during the development of your work as a frontend developer.

Use the menu on the left (or the mobile menu) to navigate between the different tools.

Below I describe the tools you will find on this page:

Lorem Ipsum text generator

This module will allow you to select the output type for your text Lorem Ipsum.

Indicate a number and then the desired output type; paragraphs, words, letters or list (in this case the number will indicate the number of list items)

You can also select the output format: HTML format or Text format. With the Text format you will copy the "<p>" tags and these can be used to paste in your HTML code.

Box Shadow generator

This module allows you to generate shadows in boxes. So that you can reproduce a real environment, you can configure the background color, the shadow color and the color of the element that will have the shadow. The only color that will be displayed in the generated code will be the color of the shadow and its transparency.

  • Outline / Inset: Selects whether the shadow is external or internal.
  • Horizontal / Vertical length: Select the horizontal and vertical distance to position the shadow.
  • Blur radius: Selects the shadow blur.
  • Spread radius: Selects the length of the shadow.
  • Shadow color: Select the color.
  • Opacity: Select the transparency of the shadow.

Text Shadow generator

This module allows you to generate shadows in texts. So that you can reproduce a real environment, you can configure the background color, shadow color and text color. The only CSS code that will be displayed in the generated code will be the one corresponding to the shadow and its transparency.

  • Text: Text to be displayed in the sample window.
  • Font Size: The font size of the text.
  • Outline / Inset: Selects whether the shadow is external or internal.
  • Horizontal / Vertical length: Select the horizontal and vertical distance to position the shadow.
  • Blur radius: Selects the shadow blur.
  • Spread radius: Selects the length of the shadow.
  • Shadow color: Select the color.
  • Opacity: Select the transparency of the shadow.

Border radius generator

This module allows you to generate rounded corners (border radius).

You can indicate the value for all corners at once or individually.

Border generator (Border and Outline)

This functionality is integrated in the Border Radius module.

  • Border type: Select the type of border you want to apply.
  • Border width: Indicates the thickness of the border.
  • Border color: Select the border color.
  • Background color: Select the item's color.
  • Border position: Indicate on which edge you want to view the border.

Px to Em converter and vice versa

This module will allow you to convert from px to em and vice versa.

You will have to indicate a base font size (base font in the browser or the size of the parent element), and then enter the size in px or em depending on which unit you want to convert from.