Full CSS Styling Control.
Every block in CardBuilder exposes the complete spectrum of CSS properties — organized into 8 logical groups. Style the whole block, or drill into sub-components and style each part independently. No CSS knowledge required.
- 8
- Property groups
- 50+
- CSS properties
- 6
- CSS units supported
- ∞
- Sub-component targets
| Block | Style Targets |
|---|---|
| Entity State |
Block
State value
Unit
|
| Entity Attribute |
Block
Label
Value
|
| Icon |
Block
Icon
Pre Template
Post Template
|
| Slider |
Block
Track
Track Active
Thumb
Value
|
| Button Toggle |
Block
Option
Option Active
Icon
Label
|
| Select Menu |
Block
Container
Dropdown
Selected Label
|
Style Every Part of a Block, Independently
Blocks with multiple visual components expose separate style targets — so you can give a different color to the state value and the unit, or style the active button differently from inactive ones.
How it works
Select any block, open the Styles panel. If the block has sub-components, a target selector appears at the top. Pick the target — the corresponding element is highlighted on the canvas with a dashed accent border. Your styles now apply only to that part.
Every CSS Property, Organized
Properties are organized into 8 collapsible groups so you can find what you need instantly — without scrolling through an endless list.
Layout
Display, overflow, z-index, and position coordinates for absolute blocks.
Size
Explicit dimensions with min and max constraints, all with full unit selection.
Spacing
Margin and padding — set all sides at once or each side individually.
Typography
Complete text control — font, size, weight, line height, transform, shadow, and more.
Background
Solid colors, image URLs, CSS gradients, and full media manager integration.
Border
Border width, style, and color per side — plus corner radius for each corner independently.
Effects
Opacity, drop shadow, CSS filters (blur, brightness, contrast, grayscale), backdrop filter, blend mode, and rotation.
Flex
Full flex container and flex item control — direction, wrapping, alignment, gaps, grow, shrink, and order.
The Right Unit for Every Context
Every numeric property lets you choose the unit that makes the most sense — mix and match freely within a single card.
px
Pixels
Fixed, absolute size. Precise and predictable — ideal for borders, shadows, and fixed-size elements.
%
Percentage
Relative to the parent element. Perfect for fluid layouts that adapt to their container.
rem
Root em
Relative to the root font size. Great for consistent typographic scaling across the card.
em
Em
Relative to the current element's font size. Useful for spacing that scales with text.
vw
Viewport Width
Percentage of the browser viewport width. Makes elements truly responsive to screen size.
vh
Viewport Height
Percentage of the browser viewport height. Ideal for full-height sections.
Pixel-Perfect Control Over Every Detail
From a subtle text shadow to a full CSS gradient background — every visual detail is adjustable without leaving the builder.
CSS Gradients
Enter any CSS gradient as a background image — linear, radial, conic. Or use a dynamic binding template to generate gradients from entity values.
linear-gradient(135deg, #667eea, #764ba2)
Backdrop Filter
Apply CSS backdrop-filter to create frosted glass effects — blur, brightness, and saturation on the area behind the block.
blur(12px) brightness(1.1)
Mix Blend Mode
Control how a block blends with the elements beneath it using CSS mix-blend-mode — multiply, screen, overlay, and more.
multiply
Box Shadow
Add drop shadows or inset shadows with full CSS syntax — offset, blur, spread, color, and multiple shadows on a single block.
0 4px 24px rgba(0,0,0,0.15)
Styles That React to Entity State
Any style property can be connected to live Home Assistant entity data. Change background color based on temperature, opacity based on a switch state, or size based on a numeric sensor value.
Every Style. Every Block.
Install CardBuilder and start styling your cards with the full power of CSS — no code required.