Box Layer

Box layers are one of the most versatile and fundamental building blocks in Component.Studio. Think of them as infinitely customizable rectangles that can serve as backgrounds, decorative elements, containers, or structural components of your design. With powerful fill options, flexible borders, and nine different corner styles, box layers give you the creative freedom to build everything from simple colored rectangles to complex gradient backgrounds with ornate borders. Want to draw a line? That's just a thin box!

Position and Size

Like all layers in Component.Studio, box layers start with fundamental positioning and sizing controls. These properties determine where your box appears on the canvas and how large it is.

Property	Description
X Position	Horizontal position in pixels from the origin point
Y Position	Vertical position in pixels from the origin point
Width	Width of the box in pixels
Height	Height of the box in pixels
Rotation	Rotation angle in degrees (0-360)
Anchor	The reference point for positioning (top-left, center, etc.)

Tip: Use the "Drag to Move" toggle to enable interactive positioning directly on the canvas. This is often faster than manually entering X and Y values, especially when aligning boxes with other layers.

Fill Properties

The fill is what gives your box its visual substance. Component.Studio offers six different fill types, each with its own creative possibilities.

Fill Types

Fill Type	Description	Best For
None	No fill at all - completely transparent interior	Creating outline-only boxes, hollow frames, or invisible hit areas
Color	Solid color fill using Fill Color 1	Simple backgrounds, color blocks, solid design elements
Texture	Repeating image pattern from a URL	Patterned backgrounds, decorative fills, paper textures, fabric patterns
Horizontal	Left-to-right gradient between two colors	Sunrise/sunset effects, horizontal transitions, side-to-side fades
Vertical	Top-to-bottom gradient between two colors	Sky backgrounds, depth effects, top-to-bottom transitions
Diagonal	Top-left to bottom-right gradient	Dynamic backgrounds, directional emphasis, modern design elements
Radial	Center-to-edge circular gradient	Spotlight effects, vignettes, circular transitions, glowing elements

Fill Properties

Property	Range	Description
Fill Opacity	0-100%	Controls transparency of the fill. 0 is completely invisible, 100 is fully opaque.
Fill Color 1	Hex color	The primary color for solid fills, or the starting color for gradients
Fill Color 2	Hex color	The ending color for gradient fills (horizontal, vertical, diagonal, radial)
Color Stop 1	0-100%	Position where the first color begins in the gradient (default 0)
Color Stop 2	0-100%	Position where the second color ends in the gradient (default 100)
Fill Texture	URL	Image URL for texture fills - the image will repeat to fill the entire box

Understanding Color Stops

Color stops control where gradient transitions happen. The default values (0 and 100) create a smooth transition across the entire box. But you can create more interesting effects:

Sharp transition: Set Color Stop 1 to 45 and Color Stop 2 to 55 to create an almost-hard line in the middle of the gradient
Delayed fade: Set Color Stop 1 to 0 and Color Stop 2 to 30 to have the first color dominate most of the box with a quick fade at one end
Concentrated center: Set Color Stop 1 to 40 and Color Stop 2 to 60 to create a concentrated transition in the middle

Dynamic Fills: All fill properties support template variables! You can use {{variableName}} in color values or texture URLs to create data-driven designs where each card has different colors or patterns based on your dataset.

Border Properties

Borders add definition and emphasis to your boxes. Component.Studio gives you precise control over border appearance and positioning.

Border Types

Border Type	Description
None	No border at all
Color	Solid color border using the Border Color property
Texture	Image-based border using the Border Texture URL - the image repeats along the border path

Border Controls

Property	Range	Description
Thickness	0-9999px	Width of the border in pixels
Border Color	Hex color	Color of the border (when Border Type is "color")
Border Opacity	0-100%	Transparency of the border. 0 is invisible, 100 is fully opaque.
Border Alignment	0-100%	Where the border sits relative to the box edge: 0 = inside (border grows inward) 50 = center (border straddles the edge) 100 = outside (border grows outward)
Border Texture	URL	Image URL for texture borders

Understanding Border Alignment

Border alignment is a powerful but sometimes confusing property. Here's what it means in practice:

Inside (0%): The border draws entirely within the box dimensions. A 400x300px box with a 10px inside border still measures 400x300px total - the border eats into the interior space.
Center (50%): The border straddles the box edge. Half the border thickness is inside, half is outside. A 400x300px box with a 10px centered border actually takes up 405x305px of visual space (5px extending beyond each edge).
Outside (100%): The border draws entirely outside the box dimensions. A 400x300px box with a 10px outside border takes up 410x310px of visual space, but the interior fill still covers the full 400x300px.

Pro Tip: Use inside alignment (0) when you need precise outer dimensions for layout purposes. Use center alignment (50) for the most visually balanced borders. Use outside alignment (100) when you want to add borders without affecting the size of your interior content.

Corner Styles

Corners are where box layers get really interesting. Component.Studio offers nine distinct corner types, each bringing a different aesthetic to your designs. The Corner Radius property controls how prominent the corner effect is.

Corner Type	Visual Description	Best Used For
Square	Standard 90-degree corners - clean and sharp	Modern designs, technical layouts, when you want crisp edges
Round	Classic rounded corners with smooth circular arcs	Friendly, approachable designs; buttons; modern UI elements
Chamfer	Corners cut at 45-degree angles, creating mini diagonal edges	Technical drawings, geometric designs, octagonal shapes
Fillet	Concave rounded corners that curve inward rather than outward	Vintage labels, ornate frames, decorative elements
Rabbet	Step-cut corners with rectangular notches	Construction diagrams, woodworking designs, architectural elements
Irregular	Diagonal flag-like cuts that slice off corners asymmetrically	Dynamic banners, ribbon effects, modern asymmetric designs
Tassle	Small triangular points extending outward from each corner	Decorative badges, emblems, starburst accents
Asterisk	Three-pointed star bursts radiating from each corner	Attention-grabbing elements, special callouts, explosive emphasis
Dogear	Inward-pointing triangular folds, like a folded page corner	Page-turn effects, paper simulations, document designs

Corner Radius: The Corner Radius property (0-100) controls the size or prominence of the corner effect. For round corners, higher values create more pronounced curves. For chamfer, it controls how much of the corner gets cut. For decorative corners like tassle or asterisk, it controls the size of the decorative elements. Experiment with different values to find the perfect look!

Corner + Border Interaction: When combining fancy corner types with thick borders, the results can be visually complex. Start with thinner borders and adjust gradually. Some corner types (especially chamfer and fillet) look best with centered or inside border alignment.

Visual Effects

Box layers support the complete Component.Studio effects pipeline, allowing you to add depth, emphasis, and visual polish to your designs.

Effect	Purpose
Drop Shadow	Add depth by casting a shadow beneath the box. Control offset, blur, color, and opacity.
Color Overlay	Tint the entire box with a semi-transparent color. Great for quick color adjustments or creating duotone effects.
Blur	Apply gaussian blur to soften the box. Useful for background elements or creating depth of field.
Glow	Add a soft outer glow around the box edges. Perfect for making elements pop or creating neon effects.
Outline	Add a sharp outline around the box silhouette. Unlike borders, outlines always follow the outer edge.
Color Adjust	Fine-tune brightness, contrast, saturation, and other color properties of the entire box.

Effects Stack: You can combine multiple effects on a single box layer! The effects are applied in a specific order, so experimenting with different combinations can yield surprising results. Try a radial gradient fill + drop shadow + outer glow for a dimensional button effect.

Working with Box Layers

Common Use Cases

Background Box

Create a full-bleed background by setting a box to cover your entire canvas. Use a radial gradient from light to dark for depth, or use a texture fill for paper effects. Set this box as your bottom layer and build your design on top.

Colored Section Divider

Use a thin horizontal box (like 1200x20px) with a solid color or horizontal gradient to divide sections of your card. Try using the same color at different opacities to create subtle visual hierarchy.

Decorative Frame

Create an ornate frame using a box with no fill (fillType: none), a thick border with outside alignment, and fillet or chamfer corners. The transparent center lets other layers show through while the border provides elegant framing.

Text Container

Add a box behind text to improve readability. Use a solid color fill with reduced opacity, rounded corners for friendliness, and possibly a subtle drop shadow to lift the text off the background. Use the "Add Text to Box" button for easy text addition.

Dynamic Box Designs

Box layers become incredibly powerful when combined with template variables and dataset values:

Data-driven colors: Use {{teamColor}} in Fill Color 1 to make each card in your deck match a team's branding
Variable sizing: Use {{statValue * 5}} in the Width property to create variable-width progress bars
Conditional visibility: Combine with layer visibility controls to show/hide decorative boxes based on data conditions
Pattern variety: Use {{patternURL}} in Fill Texture to pull different background patterns from your dataset

Performance Considerations

Texture Performance: Texture fills and borders require loading external images. If you're using the same texture across multiple boxes in a design, Component.Studio caches the texture for efficiency. However, if every card in a 100-card deck uses a unique texture URL, that's 100 images to load. Use textures thoughtfully.

Gradient Efficiency: Gradients are generated programmatically and cached, making them very efficient. Don't hesitate to use gradients liberally - they're lighter-weight than you might think!

Tips and Best Practices

Layer order matters: Boxes don't have to be just backgrounds. Layer boxes over other elements with reduced fill opacity to create overlay effects or vignettes.
Start simple: Begin with basic squares and solid colors, then add borders, corners, and effects progressively. It's easier to add complexity than to simplify an overly-ornate design.
Consider the border + corner combination: Not all border styles work well with all corner types. Thick borders on asterisk corners can create visual chaos. Test and iterate.
Use the visual preview: The canvas shows you real-time updates as you adjust properties. Keep an eye on the preview rather than trying to imagine the final result.
Name your layers: When you have multiple boxes in a design (background box, header box, footer box, decorative accents), clear layer names help you stay organized.
Leverage border alignment: When you need borders that don't affect layout, use outside alignment. When you need precise containment, use inside alignment.

Troubleshooting

My border isn't showing up

Check these common issues:

Is Border Type set to "none"? Change it to "color" or "texture"
Is Thickness set to 0? Increase it to at least 1
Is Border Opacity set to 0? Increase it toward 100
If using a texture border, is the URL valid and loading?

My gradient looks wrong

Verify these settings:

Are Fill Color 1 and Fill Color 2 actually different colors?
Check your Color Stop values - if they're identical (both 50, for instance), you'll get a hard line instead of a gradient
Make sure fillType is set to the gradient type you want (horizontal, vertical, diagonal, or radial), not "color"

My corners look too extreme or barely visible

Adjust the Corner Radius value:

For subtle corners, try values between 5-15
For pronounced corners, try values between 20-40
Very high values (60-100) work best on larger boxes - they might be overwhelming on small elements

Performance seems slow with many boxes

Reduce the number of unique texture URLs - reuse textures when possible
Complex corner types with thick borders can be rendering-intensive; simplify if needed
Multiple effects stacked on many layers can impact performance - use effects strategically

Box layers are the foundation of great designs in Component.Studio. Master these controls, experiment fearlessly, and remember that the best designs often come from simple combinations used creatively. Happy designing!