Bootstrap 4 CSS customization
en | ja
Gradient and shadow effects
Gradients and shadows
Bootstrap 4 has built-in custom variables which begin with $enable- (see Sass options). You can enable gradient and shadow effects with setting $enable-gradients and $enable-shadows to true.
This page shows style variations affected by those variables and compares differences for each component. As differences are slight, you may need to check with an imaging software.
Colors
Background gradient
.bg-primary
.bg-gradient-primary
.bg-secondary
.bg-gradient-secondary
.bg-success
.bg-gradient-success
.bg-danger
.bg-gradient-danger
.bg-warning
.bg-gradient-warning
.bg-info
.bg-gradient-info
.bg-light
.bg-gradient-light
.bg-dark
.bg-gradient-dark
Code
User input
<kbd> is affected by $enable-shadows. But it is difficult to recognize the difference because the background is vary dark (90% gray). See below.
No shadow and With shadow.
Below are modified examples with changing background color to 40% gray (you can see the shadow at bottom).
No shadow and With shadow
Images
Image thumbnails
No shadow
With shadow
Alerts
Primary: No gradient
Primary: With gradient
Secondary: No gradient
Secondary: With gradient
Success: No gradient
Success: With gradient
Danger: No gradient
Danger: With gradient
Warning: No gradient
Warning: With gradient
Info: No gradient
Info: With gradient
Light: No gradient
Light: With gradient
Dark: No gradient
Dark: With gradient
Buttons
.btn.btn-primary |
|
.btn.btn-secondary |
|
.btn.btn-success |
|
.btn.btn-danger |
|
.btn.btn-warning |
|
.btn.btn-info |
|
.btn.btn-light |
|
.btn.btn-dark |
Caroucel
With controls
Dropdowns
Shadow behind menu
Active items
Forms
No shadow
With shadow
Custom form controls
Custom checkboxes
No gradient/shadow
With gradient+shadow
Custom radios
No gradient/shadow
With gradient+shadow
Custom range
No gradient/shadow
With gradient+shadow
Modal
Popovers
Progress bars
No shadow
With shadow