Styling Properties
These are common styling properties that can be applied to most elements in the Bubble Editor. They include borders, backgrounds, shadows, fonts, etc. These are also properties included in Styles.
Defines the opacity of the entire element. 100 is fully opaque while 0 is fully transparent.
Note: This is different than the opacity input, or alpha value, on the color picker. That value sets the opacity of the color itself. This setting sets the opacity of the entire element.
These properties control the size and positioning of the selected element.
Defines the width of the selected element in pixels.
Defines the height of the selected element in pixels. This height adjusts if the element or content inside a container is 'Set to stretch to fit content.' In this case, the number entered here is the minimum height for that element.
Defines the horizontal position in pixels relative to the left border of the containing element, which is either a group or popup or the page.
Defines the vertical position in pixels relative to the top border of the containing element, which is either a group, a popup, or the page.
Rotate the selected element by entering a number in this field. This number is expressed in degrees.
These properties define a shadow for the selected element.
Choose from None, Outset, and Inset to define a shadow to the selected element. Inset sets a show inside the element. Outset sets a show outside the element.
Defines the position of the horizontal shadow. Negative values are allowed.
Defines the position of the vertical shadow. Negative values are allowed.
Define the blur distance in pixels. A higher number means a more diffuse shadow, and a lower number means a sharper shadow.
Positive values will cause the shadow to expand and grow bigger, negative values will cause the shadow to shrink. If not specified, it will be 0 (the shadow will be the same size as the element).
Defines the color of the shadow.
Tip: Experiment with the transparency of the color.
These properties style text.
Select the font family to apply to the selected element. Choose from the hundreds of fonts in the Google Fonts Library.
Select the font weight to apply to the selected element. Choose from standard weights ranging from 100 to 900.
Note: Not all fonts have all 9 weights.
Enter a font size in pixels for the text.
Makes the text darker and thicker.
Makes the text slanted.
Underlines the text. This is useful in conditional formatting, when a link is hovered, for instance.
Aligns the text. Choose from Left, Center, and Right.
Select the text color.
Select the color to apply to the placeholder of the input element.
These properties add a shadow to texts.
Check this box to show a shadow on the text.
Defines the position of the horizontal shadow. Negative values are allowed.
Defines the position of the vertical shadow. Negative values are allowed.
Define the blur distance in pixels. A higher number means a more diffuse shadow, and a lower number means a sharper shadow.
Select the color of the shadow.
Tip: Experiment with the transparency of the color.
These options control text spacing.
Define the space between words in pixels.
Define the line height in pixels.
Define the space between letters in pixels.
These properties define the borders of the elements.
Note: Top and left borders on an element will nudge the center alignment of items inside that element (e.g. text). One workaround is to have a text element inside of another element (e.g. group), and apply the border to the outside element instead.
Check this box if borders are to be set independently.
Choose a style for the border. Choose from None, Dotted, Dashed, Double, Groove, Ridge, Inset, and Offset.
Define the border radius in pixels.
Define the border width in pixels.
Select the border color.
This text is displayed by the browser when the user hovers over it with the mouse. Technically, it sets a title attribute to the element it is applied to.
These properties let you select the space between the borders and the actual content of the element.
Specify the amount of padding at the top of the container in pixels.
Specify the amount of padding on the right side of the container in pixels.
Specify the amount of padding to the bottom of the container in pixels.
Specify the amount of padding on the left side of the container in pixels.
Check this box to center the text vertically.
Tip: Top and left borders on an element will nudge the center alignment of items inside that element (e.g. text). One workaround is to have a text element inside of another element (e.g. group), and apply the border to the outside element instead.
These options define the background of the elements: color, image, etc.
Select the background style to apply to the element. Choose from None, Flat color, Gradient, and Image.
Select the background color for the element.
Choose from Linear and Radial to define the gradient style.
Choose from Top, Left, Bottom, Right, and Custom to define the gradient direction.
Enter a value between 0 and 360 for the direction of the gradient.
Defines the shape of the gradient. Choose from Ellipse and Circle.
Select a screen location from this dropdown menu to determine where to base the gradient. Choose from Closest-side, Closest-corner, Farthest-side, and Farthest-corner.
Define the horizontal centering position. 50% will center the gradient.
Define the vertical centering position. 50% will center the gradient.
Select the starting color of the gradient.
Select the ending color of the gradient.
Select the optional middle color of the gradient. If the input is empty, no intermediate color will be applied.
Upload or define a dynamic image. Select an image from the Bubble royalty-free library, if desired.
Centers the image in the element.
If the element is wider than the element selected, the image will automatically resize to cover the entire element.
In Responsive mode, checking this option makes sure the element's background image will be cropped to fill the entire element's background without distorting the image.
Repeat the image vertically if the image is smaller than the element's height.
Repeat the image horizontally if the image is narrower than the element's width.
When using a dynamic image, it might take a few milliseconds for the image to load. In the meantime, select a background color for the element. The default is transparent.
Bubble renders the page to adjust to the screen width, i.e, responsive layout. A few options control the behavior of the page.
Last modified 9mo ago