[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
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us