Skip to main content
Basic layers (CALayer) are the most fundamental building blocks in CAPlayground. They are rectangular areas that can be styled with colors, borders, and rounded corners.

​
Creating a Basic Layer

  1. Click Add Layer in the Layers Panel.
  2. Select Basic Layer.
  3. A new rectangle will be added to your canvas (defaults to a blue square).

​
Basic Properties

These properties are found in the Content and Compositing tabs of the Inspector Panel.

​
Background Color

The internal fill color of the layer.
  1. Find Background Color in the Content tab.
  2. Click the color indicator to open the color picker.
  3. Choose a solid color.

​
Border

Adds an outline around the edge of the layer.
  • Border Color: The color of the outline.
  • Border Width: The thickness of the outline in pixels. Set to 0 to hide.

​
Corner Radius

Rounds the corners of the layer.
  1. Find Corner Radius in the Compositing tab.
  2. Enter a pixel value (e.g., 10 for subtle rounding, or half the layer’s width for a circle).

​
Shaping Tips

While Basic Layers are rectangular by default, you can use Corner Radius to create different shapes:
  • Circle: Set Width and Height to the same value, then set Corner Radius to half that value.
  • Pill: Create a wide rectangle and set Corner Radius to half the height.
  • Containers: Set the Background Color to transparent or Opacity to 0% to use the layer as an invisible folder for other sublayers.

​
Common Properties

All layers share these standard properties in the Geometry and Compositing tabs.

​
Geometry

  • Position (X, Y): Precise location on the canvas.
  • Bounds (W, H): Precise dimensions of the layer.
  • Anchor Point: The pivot point for rotation (X: 0-1, Y: 0-1).
  • Rotation: Rotate around X, Y, or Z axes.

​
Compositing

  • Opacity: Adjust overall transparency from 0% to 100%.
  • Hidden: Toggle visibility in the editor and final wallpaper.
  • Masks to Bounds: When enabled, any sublayers outside this layer’s edges will be hidden (clipped).

​
Troubleshooting

​
”My circle is an oval”

Check:
  • Ensure the Width and Height in the Geometry tab are exactly equal.

​
”I can’t see my layer”

Check:
  • Is the Background Color same as the canvas background?
  • Is Opacity set to 0%?
  • Is the Hidden toggle enabled?

​
Next Steps

Gradient Layers

Use multiple colors instead of one

Layer Hierarchy

Organize sublayers inside basic layers

Creating Animations

Make your shapes move

State Transitions

Change colors between states