How to Create Layers
Using the Add Layer Button
- Locate the Layers Panel on the left side of the editor
- Click the Add Layer button (with a + icon)
- Select the type of layer you want to create from the dropdown menu
Where Layers Are Created
By default, new layers are added:- At the top of the current layer list (in the Base State)
- As root layers (when no layer is selected)
- As sublayers (when a layer is selected)
- At the center of your canvas
Layers higher in the list appear behind layers lower in the list. The editor renders them in order, so each new layer in the list is painted on top of the previous one.
Creating Sublayers (a layer inside another layer)
To create a layer as a sublayer inside a layer:- Select an existing layer you want the sublayer to be created in
- Create a new layer
- The layer will become a child of the layer
Available Layer Types
CAPlayground supports nine types of layers, each with unique capabilities:Text Layer
A layer that displays text with customizable fonts, colors, and alignment. Best for:- Titles and headings
- Labels and captions
- Dynamic text content
- Custom fonts
- Text alignment (left, center, right, justified)
- Text wrapping
- Color and opacity
Basic Layer (Shape)
A layer that displays geometric shapes like rectangles, circles, and rounded rectangles. Best for:- Backgrounds and containers
- Decorative elements
- Solid background for a wallpaper
- Three shape types: Rectangle, Circle, Rounded Rectangle
- Fill and stroke colors
- Stroke width
- Corner radius
Gradient Layer
A layer that displays smooth color gradients. Best for:- Backgrounds
- Color overlays
- Visual effects
- Three gradient types: Axial (linear), Radial, Conic
- Multiple color stops
- Adjustable start and end points
- Opacity per color
Image Layer
A layer that displays an image from your computer or a web link. Best for:- Photos and illustrations
- Logos and icons
- Textures and patterns
- Supports PNG, JPEG, SVG
- Multiple fit modes (cover, contain, fill, none)
- Drag and drop & Link Import support
- SVG automatic PNG conversion
- Click Add Layer → Image Layer… (to upload) or Import from Link.
- Select your file or paste a URL.
You can drag and drop images directly onto the canvas to create image layers quickly!
Video Layer
A layer that displays an animated video or GIF. Best for:- Animated backgrounds
- Moving elements
- GIF animations
- Supports video files and GIFs
- Maximum 30 fps recommended
- Maximum 12 seconds duration recommended
- Auto-reverse and Loop options
- Click Add Layer → Video Layer… or Import from Link.
- Select a file or paste a URL.
- The video will be processed and added to your project.
Emitter Layer
A layer that creates particle effects like snow, rain, sparkles, and more. Best for:- Particle effects
- Animated backgrounds
- Environmental atmosphere
- Multiple emitter shapes (point, line, rectangle, circle, etc.)
- Customizable particles (emitter cells)
- Particle properties (velocity, lifetime, scale, rotation, etc.)
Replicator Layer
A layer that duplicates a single “source” layer into many copies with offsets in position, rotation, and scale. Best for:- Creating grids of items
- Circular patterns
- Complex geometric designs
- Instance count and delay
- Translation, rotation, and scale offsets per instance
- Automatic layout updates
Liquid Glass Layer
A layer that creates a realistic glass refraction (distortion) effect on layers behind it. Best for:- Frosted glass effects
- Magnifying lenses
- Modern “glassmorphism” UI
- Distorts any layers positioned behind it
- Adjustable Strength and Depth
- Optional Chromatic Aberration (color fringing)
Transform Layer (CATransformLayer)
A special container layer for gyro wallpapers that makes sublayers respond to device tilt and enables 3D depth. Best for:- Gyro wallpapers with parallax effects
- Building 3D objects like cubes
Learn more about 3D Containers →
Layer Organization
Layer Order
The order of layers in the Layers Panel determines their visual stacking:- Top of the list = Back of the wallpaper (appears behind)
- Bottom of the list = Front of the wallpaper (appears on top)
- Click and drag a layer in the Layers Panel
- Drop it above or below other layers
- A blue line shows where the layer will be placed
Currently, you cannot create empty group layers directly. Create layers first, then organize them into groups by dragging.
Layer Limits
Performance Considerations
- Keep it simple: More layers = more processing power required
- Optimize images: Use appropriate image sizes (don’t use 4K images if not needed)
- Limit video layers: Video layers are the most resource-intensive
- Limit emitter layers: Particle effects can impact performance
Next Steps
Editing Layers
Learn how to modify and customize your layers
Layer Hierarchy
Master groups and sublayers for better organization
Layer Types
Explore detailed guides for each layer type
Creating Animations
Bring your layers to life with animations