Bootstrap 5 Tutorial
v5.3.0Bootstrap 5 Tutorial
Gradient Backgrounds in Bootstrap 5
Gradient Backgrounds: Add gradient backgrounds to elements with the
.bg-gradient class.Basic Gradient Backgrounds
Apply gradient backgrounds to any element by adding the .bg-gradient class alongside background color classes.
Theme Color Gradients
.bg-primary .bg-gradient
Primary color gradient
.bg-success .bg-gradient
Success color gradient
.bg-danger .bg-gradient
Danger color gradient
.bg-warning .bg-gradient
Warning color gradient
.bg-info .bg-gradient
Info color gradient
.bg-dark .bg-gradient
Dark color gradient
<!-- Basic gradient backgrounds -->
<div class="bg-primary bg-gradient text-white p-4">
Primary gradient
</div>
<div class="bg-success bg-gradient text-white p-4">
Success gradient
</div>
<div class="bg-warning bg-gradient text-dark p-4">
Warning gradient
</div>
<!-- Gradient on buttons -->
<button class="btn btn-primary bg-gradient">
Gradient Button
</button>
<!-- Gradient on cards -->
<div class="card bg-danger bg-gradient text-white">
<div class="card-body">
Gradient Card
</div>
</div>Gradient Direction
Custom Gradient Directions
Top to Bottom (Default)
Linear gradient from top to bottom
Left to Right
Linear gradient from left to right
Diagonal (45deg)
Diagonal gradient at 45 degrees
Radial Gradient
Circular gradient from center
CSS for Custom Gradients
/* Custom gradient directions */
/* Top to bottom (Bootstrap default) */
.gradient-1 {
background: linear-gradient(to bottom, #667eea, #764ba2);
}
/* Left to right */
.gradient-2 {
background: linear-gradient(to right, #f093fb, #f5576c);
}
/* Diagonal */
.gradient-3 {
background: linear-gradient(45deg, #4facfe, #00f2fe);
}
/* Radial gradient */
.gradient-4 {
background: radial-gradient(circle, #a8edea, #fed6e3);
}
/* Custom angle */
.custom-angle {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
/* Multiple color stops */
.multi-stop {
background: linear-gradient(
to right,
#ff7e5f 0%,
#feb47b 50%,
#86a8e7 100%
);
}Gradient Types
Linear Gradient
Most common type, transitions along a straight line
.linear-gradient {
background: linear-gradient(
to right,
#ff7e5f,
#feb47b
);
}Radial Gradient
Circular gradient radiating from a center point
.radial-gradient {
background: radial-gradient(
circle,
#a8edea,
#fed6e3
);
}Conic Gradient
Color transitions rotated around a center point
.conic-gradient {
background: conic-gradient(
#ff7e5f,
#feb47b,
#86a8e7,
#ff7e5f
);
}Gradient Applications
Hero Sections
Amazing Product
Create beautiful gradients for your hero sections to grab attention.
<!-- Hero section with gradient -->
<div class="gradient-hero p-5 text-white text-center">
<h1 class="display-4 fw-bold">Amazing Product</h1>
<p class="lead">Create beautiful gradients...</p>
<button class="btn btn-light btn-lg">
Get Started
</button>
</div>
/* CSS */
.gradient-hero {
background: linear-gradient(
135deg,
#667eea 0%,
#764ba2 100%
);
}Buttons & Cards
Gradient Buttons
Gradient Cards
Feature 1
Card with gradient background
Feature 2
Another gradient card
Advanced Gradient Techniques
Advanced Gradient Examples
Multiple Color Stops
Gradient with 3+ color stops for complex transitions
Hard Color Stops
Sharp transitions between colors
Repeating Gradient
Pattern created with repeating gradients
Transparency Gradient
Gradient with transparency for overlay effects
/* Advanced gradient techniques */
/* Multiple color stops */
.multi-stop-gradient {
background: linear-gradient(
to right,
#ff7e5f 0%,
#feb47b 25%,
#86a8e7 50%,
#91eae4 100%
);
}
/* Hard color stops */
.hard-stop-gradient {
background: linear-gradient(
to right,
#ff7e5f 0%,
#ff7e5f 50%,
#86a8e7 50%,
#86a8e7 100%
);
}
/* Repeating gradient */
.repeating-gradient {
background: repeating-linear-gradient(
45deg,
#ff7e5f,
#ff7e5f 10px,
#feb47b 10px,
#feb47b 20px
);
}
/* Transparency gradient */
.transparency-gradient {
background: linear-gradient(
to bottom,
rgba(255, 255, 255, 0) 0%,
rgba(0, 0, 0, 0.7) 100%
);
}Gradient Generator Tools
Online Gradient Generators
- CSS Gradient - Visual gradient generator
- UI Gradients - Beautiful gradient collections
- Web Gradients - Free collection of gradients
- Gradient Hunt - Gradient palette generator
- Color Space - Advanced gradient tool
Performance Considerations
Performance Tips
- Use sparingly: Too many gradients can slow down rendering
- Optimize complexity: Simple gradients render faster than complex ones
- Avoid animation: Animating gradients is performance-intensive
- Test on devices: Some older devices struggle with complex gradients
- Consider fallbacks: Provide solid color fallbacks for older browsers
- GPU acceleration: Simple gradients are GPU accelerated, complex ones may not be
Browser Support
| Feature | Support | Notes |
|---|---|---|
| Linear Gradient | Excellent | Supported by all modern browsers |
| Radial Gradient | Excellent | Widely supported |
| Conic Gradient | Good | Not supported in IE and older Safari |
| Repeating Gradients | Excellent | Well supported |
| Gradient Animation | Good | Performance varies by browser |
Custom SCSS Gradients
SCSS Mixins for Gradients
Create reusable gradient mixins in SCSS:
// SCSS gradient mixins
// Linear gradient mixin
@mixin linear-gradient($direction, $colors...) {
background: linear-gradient($direction, $colors);
background: -webkit-linear-gradient($direction, $colors);
}
// Radial gradient mixin
@mixin radial-gradient($shape, $colors...) {
background: radial-gradient($shape, $colors);
background: -webkit-radial-gradient($shape, $colors);
}
// Usage
.element-1 {
@include linear-gradient(to right, #667eea, #764ba2);
}
.element-2 {
@include radial-gradient(circle, #a8edea, #fed6e3);
}
// Theme gradient classes
.bg-gradient-primary {
@include linear-gradient(135deg, theme-color("primary") 0%, darken(theme-color("primary"), 15%) 100%);
}
.bg-gradient-success {
@include linear-gradient(135deg, theme-color("success") 0%, darken(theme-color("success"), 15%) 100%);
}
.bg-gradient-warning {
@include linear-gradient(135deg, theme-color("warning") 0%, darken(theme-color("warning"), 15%) 100%);
}
// Custom gradient utilities
@each $color, $value in $theme-colors {
.bg-gradient-#{$color} {
@include linear-gradient(135deg, $value 0%, darken($value, 15%) 100%);
}
}