ByteEditor Website Builder
Customize Effects
⚠ Note
In ByteEditor 17, the corner radius and drop shadow of buttons, cards, pictures and videos are theme tokens. You edit them as JSON on the design's “Theme” tab.
Step 1. Open the Design Builder
Click Design Builder in the Content section and open the design you want to change (see Customize Colors for how to choose the default design).
Step 2. Open the Theme tab
Open the Theme tab. Effect tokens sit in the same “tokens” object as the colours and fonts.
Step 3. Change the corner radius
Set the radius tokens, for example:
Values are numbers in px. Use “0” for square corners.
Step 4. Add a drop shadow
For example, a soft shadow under cards:
Offsets and blur are numbers in px. The last two digits of the colour set its transparency (here “26”, about 15 %). By default the offsets and blur are “0”, so there is no shadow until you set them.
💡 An invalid value (for example, “8px” instead of “8”) is ignored and the default is used instead.
Step 5. Save and publish
Click Save and publish. The site's styles are regenerated automatically.
Effect tokens
Corner radius
| Token | What it rounds | Default |
|---|---|---|
| radius.buttons | All buttons | 8 |
| radius.cards | Cards | 15 |
| radius.pictures-and-video | Pictures and videos | 15 |
Drop shadow
| Token | What it sets | Default |
|---|---|---|
| shadow.cards.offset-x | Card shadow: horizontal offset, px | 0 |
| shadow.cards.offset-y | Card shadow: vertical offset, px | 0 |
| shadow.cards.blur-radius | Card shadow: blur, px | 0 |
| shadow.cards.color | Card shadow: colour | #bcbcbcff |
| shadow.pictures-and-video.offset-x | Picture and video shadow: horizontal offset, px | 0 |
| shadow.pictures-and-video.offset-y | Picture and video shadow: vertical offset, px | 0 |
| shadow.pictures-and-video.blur-radius | Picture and video shadow: blur, px | 0 |
| shadow.pictures-and-video.color | Picture and video shadow: colour | #5b5b5bff |
💡 Effects are the same everywhere on the site: they can't be changed in a theme variant. The v4 “opacity” setting is now part of the colour: use #rrggbbaa.