[CS2] Box Layer
A box layer lets you add a box (rectangle) to your design. This page describes the properties that you can set for a box layer.
Position and Size
Sets the position and size of the layer.
| Name | Description | Example | Default |
|---|---|---|---|
| Left (x) | The horizontal (X) co-ordinate of the upper left hand corner of the layer. | 80 | 0 |
| Top (Y) | The vertical (Y) co-ordinate of the upper left hand corner of the layer. | 100 | 0 |
| Width | The width of the layer. | 500 | {{ design.width }} |
| Height | The height of the layer. | 200 | {{ design.height }} |
| Rotate | The number of degrees to the right that the layer is rotated. | 45 | 0 |
| Show outline? | Set to "true" if you want to render the outline of the layer. This also shows a dot in the center of the layer. | true | false |
| Hide overflow? | Set to "true" to not render anything outside the bounds of the layer. | true | false |
| Render this layer? | Set to "false" to not render this layer. | false | true |
| Z-Index Enabled? | Set to "true" to enable the use of the Z-Index in positioning layers. | true | false |
| Z-Index | The Z-Index of the layer. When the Z-Index is enabled, layers with a lower Z-Index are rendered behind those with a higher Z-Index. Layers with the same Z-Index are rendered in normal layer order (either top-to-bottom or bottom-to-top based on Preferences). | 500 | 1000 |
The Position and Size section also contains the following buttons for use with the Drag and Drop features of Component Studio 2.
Fill
Sets how the box is filled.
| Name | Description | Example | Default |
| Fill Type | How the layer is filled: none, color, texture, radial, horizontal, vertical, and diagonal. none: The layer is not filled. color: The layer is filled with a specific color. texture: The layer is filled with a repeating image, creating a tiled effect. radial: The layer is filled with a gradient between two specified colors radiating out from the center of the layer. horizontal: The layer is filled with a horizontal gradient between two specified colors that goes from left to right. vertical: The layer is filled with a vertical gradient between two specified colors that goes from top to bottom. diagonal: The layer is filled with a diagonal gradient between two colors that goes from the upper left to lower right. |
none | color |
| Fill Texture | When fill type is "texture," this is the image used to fill the layer. | {{ images.pic.url }} | https://component.studio/cs2/ images/favicon/600x600.png |
| Fill Color 1 | When Fill Type is "color," this is the color of the layer. When Fill Type is "texture," this color tints the image being used to fill the layer. When Fill Type is a gradient, this is the color at the start of the gradient. |
red | #ff0000 |
| Fill Opacity | The opacity of the colors (or image) used to fill the layer. | 25 | 100 |
| Fill Color 2 | When Fill Type is a gradient, this is the color at the end of the | #008000 | #ff0000 |
 |
When Fill Type is a gradient, this button swaps Fill Color 1 and Fill Color 2. | - | - |
| Color Stop 1 | When Fill Type is a gradient, this specifies (by percentage), the point at which the gradient starts. The area before that point is filled with Fill Color 1. | 15 | 0 |
| Color Stop 2 | When Fill Type is a gradient, this specifies (by percentage), the point at which the gradient ends. The area after that point is filled with Fill Color 2. | 75 | 100 |
Border
Sets the border stroke for the layer.
| Name | Description | Example | Default |
| Stroke Type | Sets the type of border for this layer: none, color, or texture. none: no border color: colored border texture: uses image as a border |
color | None |
| Stroke Texture | When Stroke Type is set to "texture," specifies the image to used as the border. | {{ images.pic.url }} | https://component.studio/cs2/ images/favicon/600x600.png |
| Stroke Color | The color of the border stroke. | #008000 | #000000 |
| Stroke Opacity | The opacity of the border stroke. | 75 | 100 |
| Stroke Width | The width in pixels of the border stroke. | 10 | 20 |
| Stroke Alignment | The percentage of the border stroke that is inside the layer. The remaining percentage is outside the layer. A Stroke Alignment of 50 for a Stroke Width of 20 creates a 20 pixel border with 10 pixels insider the layer and 10 pixels outside the layer. A Stroke Alignment of 0 creates a 20 pixel border outside the layer. | 0 | 50 |
Corners
Sets the type of corners for the box.
| Name | Description | Example | Default |
| Corner Type | Sets the corner type for the layer: chamfer, fillet, round, or square. See the image below for what the different corner types look like. | Fillet | Square |
| Corner Radius | When Corner Type is set to something other than "square," this sets the radius of the corner. | 20 | 15 |
Effects
Sets the effects to apply to the layer.
Adjust Color
| Name | Description | Example | Default |
|---|---|---|---|
| Enable color adjustments? | Set to "true" to enable color adjustments. | true | false |
| Adjust Red | Adjusts the amount of red in the layer's colors. | 75 | 100 |
| Adjust Green | Adjusts the amount of green in the layer's colors. | 50 | 100 |
| Adjust Blue | Adjusts the amount of blue in the layer's colors. | 67 | 100 |
| Adjust Gamma | Adjusts the gamma of the layer's colors. | 25 | 100 |
| Adjust Saturation | Adjusts the saturation of the layer's colors. | 90 | 100 |
| Adjust Contrast | Adjusts the contrast of the layer's colors. | 80 | 100 |
| Adjust Brightness | Adjusts the brightness of the layer's colors. | 85 | 100 |
Blending
| Name | Description | Example | Default |
|---|---|---|---|
| Opacity | Opacity of the layer (as a percentage). | 75 | 100 |
| Blend Mode | Blend mode for the layer: normal, add, multiply, or screen. Normal mode: The background has no effect on how this layer looks. Add mode (also known as Linear Dodge mode): Brightens this layer based on the background. A black background has no effect. Multiply mode: Darkens this layer based on the background. A white background has no effect. Screen mode. Brightens this layer (to a less degree than Add) based on the background. A black background has no effect. |
multiply | normal |
Blur
| Name | Description | Example | Default |
|---|---|---|---|
| Enable blur? | Set to "true" if you want to blur the layer. | true | false |
| Blur Amount | The amount of blur added to the layer. This is essentially the size of the blur. The bigger this value, the lighter the blurred layer becomes. | 10 | 1 |
| Blur Quality | The fuzziness of the blur. As this increases, the recognizability of the layer decreases. | 75 | 100 |
Color Overlay
| Name | Description | Example | Default |
| Enable color overlay? | Set to "true" to overlay the layer with a specified color. | true | false |
| Overlay Color | The color to overlay the layer with. | #ffffff | #0000ff |
| Overlay Opacity | The opacity of the overlaid color | 75 | 100 |
Drop Shadow
| Name | Description | Example | Default |
|---|---|---|---|
| Enable drop shadow? | Set to "true" to add a drop shadow to the layer. | true | false |
| Drop Shadow Distance | The number of pixels away from the layer that the shadow should cast. | 3 | 5 |
| Drop Shadow Color | The color the shadow should cast. | #00ff00 | #00000 |
| Drop Shadow Angle | The angle of the drop shadow from 0 to 359 degrees. | 30 | 45 |
| Drop Shadow Blur | The number of pixels of blurriness that should be created. More pixels is more blurry. | 3 | 100 |
Glow
| Name | Description | Example | Default |
| Enable glow? | Set to "true" to add a glow effect to the rendered text. | true | false |
| Glow Distance | The size of the glow effect in pixels. | 20 | 10 |
| Glow Color | The color of the glow effect. | #ff0000 | #ffffff |
| Glow Inner Strength | The inner strength of the glow effect. It determines how much of the glow effect is inside the layer. | 2 | 0 |
| Glow Outer Strength | The outer strength of the glow effect. It determines how much of the glow effect is outside the layer. | 3 | 4 |
Outline
| Name | Description | Example | Default |
| Enable outline? | Set to "true" to add an outline (stroke) around the layer. | true | false |
| Outline Width | The width in pixels of the outline (stroke). | 3 | 1 |
| Outline Color | The color of the outline (stroke). | #0000ff | #000000 |