Start Here
Core Concepts
UI Effects
Animations
Box Shadows
Text Shadow
UI Widgets
Color Shade
Gradient
Text Gradient
Background Gradient
Border Gradient
Other Pages
Nav First Level
Nav Second Level
Nav Third Level
N
A
V
A
V
Double Color Background Gradient
Vibrant and Dynamic Background Blends
Elevate your design with smooth transitions between two complementary or contrasting colors. These gradients create visually striking backgrounds that add depth, energy, and a modern aesthetic to your UI.
Key Features:
- Eye-Catching Visuals: Blends two colors seamlessly for a rich gradient effect.
- Easy Implementation: Use predefined classes to apply gradients instantly.
- Fully Customizable: Adjust angle, color combinations, and intensity.
- Performance Optimized: Uses lightweight CSS for fast rendering.
- Cross-Browser Support: Ensures a consistent look across modern browsers.
Red Color Gradient
Red with Dark Blue
Dark Red with Dark Blue
Light Red with Dark Blue
Red with White
Dark Red with White
Light Red with White
Red with Black
Dark Red with Black
Light Red with Black
Source Code
<div class="Wh25p Pg50 FxCr CrBdGtRdDkBe CrWe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Red with Dark Blue</div>
<div class="Wh25p Pg50 FxCr CrBdGtDkRdDkBe CrWe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Dark Red with Dark Blue</div>
<div class="Wh25p Pg50 FxCr CrBdGtLtRdDkBe CrWe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Light Red with Dark Blue</div>
<div class="Wh25p Pg50 FxCr CrBdGtRdWe CrWe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Red with White</div>
<div class="Wh25p Pg50 FxCr CrBdGtDkRdWe CrWe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Dark Red with White</div>
<div class="Wh25p Pg50 FxCr CrBdGtLtRdWe CrWe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Light Red with White</div>
<div class="Wh25p Pg50 FxCr CrBdGtRdBk CrWe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Red with Black</div>
<div class="Wh25p Pg50 FxCr CrBdGtDkRdBk CrWe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Dark Red with Black</div>
<div class="Wh25p Pg50 FxCr CrBdGtLtRdBk CrWe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Light Red with Black</div>
Yellow Color Gradient
Yellow
Dark Yellow
Light Yellow
Yellow with White
Dark Yellow with White
Light Yellow with White
Yellow with Black
Dark Yellow with Black
Light Yellow with Black
Source Code
<div class="Wh25p Pg50 FxCr CrBdGtYw CrBk FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Yellow</div>
<div class="Wh25p Pg50 FxCr CrBdGtDkYw CrWe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Dark Yellow</div>
<div class="Wh25p Pg50 FxCr CrBdGtLtYw CrBk FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Light Yellow</div>
<div class="Wh25p Pg50 FxCr CrBdGtYwWe CrBk FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Yellow with White</div>
<div class="Wh25p Pg50 FxCr CrBdGtDkYwWe CrWe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Dark Yellow with White</div>
<div class="Wh25p Pg50 FxCr CrBdGtLtYwWe CrBk FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Light Yellow with White</div>
<div class="Wh25p Pg50 FxCr CrBdGtYwBk CrBk FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Yellow with Black</div>
<div class="Wh25p Pg50 FxCr CrBdGtDkYwBk CrWe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Dark Yellow with Black</div>
<div class="Wh25p Pg50 FxCr CrBdGtLtYwBk CrBk FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Light Yellow with Black</div>
Orange Color Gradient
Orange
Dark Orange
Light Orange
Orange with White
Dark Orange with White
Light Orange with White
Orange with Black
Dark Orange with Black
Light Orange with Black
Source Code
<div class="Wh25p Pg50 FxCr CrBdGtOe CrWe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Orange</div>
<div class="Wh25p Pg50 FxCr CrBdGtDkOe CrWe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Dark Orange</div>
<div class="Wh25p Pg50 FxCr CrBdGtLtOe CrWe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Light Orange</div>
<div class="Wh25p Pg50 FxCr CrBdGtOeWe CrWe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Orange with White</div>
<div class="Wh25p Pg50 FxCr CrBdGtDkOeWe CrWe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Dark Orange with White</div>
<div class="Wh25p Pg50 FxCr CrBdGtLtOeWe CrWe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Light Orange with White</div>
<div class="Wh25p Pg50 FxCr CrBdGtOeBk CrWe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Orange with Black</div>
<div class="Wh25p Pg50 FxCr CrBdGtDkOeBk CrWe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Dark Orange with Black</div>
<div class="Wh25p Pg50 FxCr CrBdGtLtOeBk CrWe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Light Orange with Black</div>
Blue Color Gradient
Blue
Dark Blue
Light Blue
Blue with White
Dark Blue with White
Light Blue with White
Blue with Black
Dark Blue with Black
Light Blue with Black
Source Code
<div class="Wh25p Pg50 FxCr CrBdGtBe CrWe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Blue</div>
<div class="Wh25p Pg50 FxCr CrBdGtDkBe CrWe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Dark Blue</div>
<div class="Wh25p Pg50 FxCr CrBdGtLtBe CrWe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Light Blue</div>
<div class="Wh25p Pg50 FxCr CrBdGtBeWe CrWe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Blue with White</div>
<div class="Wh25p Pg50 FxCr CrBdGtDkBeWe CrWe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Dark Blue with White</div>
<div class="Wh25p Pg50 FxCr CrBdGtLtBeWe CrWe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Light Blue with White</div>
<div class="Wh25p Pg50 FxCr CrBdGtBeBk CrWe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Blue with Black</div>
<div class="Wh25p Pg50 FxCr CrBdGtDkBeBk CrWe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Dark Blue with Black</div>
<div class="Wh25p Pg50 FxCr CrBdGtLtBeBk CrWe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Light Blue with Black</div>
Green Color Gradient
Green
Dark Green
Light Green
Green with White
Dark Green with White
Light Green with White
Green with Black
Dark Green with Black
Light Green with Black
Source Code
<div class="Wh25p Pg50 FxCr CrBdGtGn CrWe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Green</div>
<div class="Wh25p Pg50 FxCr CrBdGtDkGn CrWe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Dark Green</div>
<div class="Wh25p Pg50 FxCr CrBdGtLtGn CrWe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Light Green</div>
<div class="Wh25p Pg50 FxCr CrBdGtGnWe CrWe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Green with White</div>
<div class="Wh25p Pg50 FxCr CrBdGtDkGnWe CrWe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Dark Green with White</div>
<div class="Wh25p Pg50 FxCr CrBdGtLtGnWe CrWe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Light Green with White</div>
<div class="Wh25p Pg50 FxCr CrBdGtGnBk CrWe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Green with Black</div>
<div class="Wh25p Pg50 FxCr CrBdGtDkGnBk CrWe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Dark Green with Black</div>
<div class="Wh25p Pg50 FxCr CrBdGtLtGnBk CrWe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Light Green with Black</div>
Pink Color Gradient
Pink
Dark Pink
Light Pink
Pink with White
Dark Pink with White
Light Pink with White
Pink with Black
Dark Pink with Black
Light Pink with Black
Source Code
<div class="Wh25p Pg50 FxCr CrBdGtPk CrWe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Pink</div>
<div class="Wh25p Pg50 FxCr CrBdGtDkPk CrWe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Dark Pink</div>
<div class="Wh25p Pg50 FxCr CrBdGtLtPk CrWe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Light Pink</div>
<div class="Wh25p Pg50 FxCr CrBdGtPkWe CrWe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Pink with White</div>
<div class="Wh25p Pg50 FxCr CrBdGtDkPkWe CrWe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Dark Pink with White</div>
<div class="Wh25p Pg50 FxCr CrBdGtLtPkWe CrWe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Light Pink with White</div>
<div class="Wh25p Pg50 FxCr CrBdGtPkBk CrWe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Pink with Black</div>
<div class="Wh25p Pg50 FxCr CrBdGtDkPkBk CrWe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Dark Pink with Black</div>
<div class="Wh25p Pg50 FxCr CrBdGtLtPkBk CrWe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Light Pink with Black</div>
Purple Color Gradient
Purple
Dark Purple
Light Purple
Purple with White
Dark Purple with White
Light Purple with White
Purple with Black
Dark Purple with Black
Light Purple with Black
Source Code
<div class="Wh25p Pg50 FxCr CrBdGtPe CrWe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Purple</div>
<div class="Wh25p Pg50 FxCr CrBdGtDkPe CrWe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Dark Purple</div>
<div class="Wh25p Pg50 FxCr CrBdGtLtPe CrWe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Light Purple</div>
<div class="Wh25p Pg50 FxCr CrBdGtPeWe CrWe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Purple with White</div>
<div class="Wh25p Pg50 FxCr CrBdGtDkPeWe CrWe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Dark Purple with White</div>
<div class="Wh25p Pg50 FxCr CrBdGtLtPeWe CrWe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Light Purple with White</div>
<div class="Wh25p Pg50 FxCr CrBdGtPeBk CrWe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Purple with Black</div>
<div class="Wh25p Pg50 FxCr CrBdGtDkPeBk CrWe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Dark Purple with Black</div>
<div class="Wh25p Pg50 FxCr CrBdGtLtPeBk CrWe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Light Purple with Black</div>
Gray Color Gradient
Gray
Dark Gray
Light Gray
Gray with White
Dark Gray with White
Light Gray with White
Gray with Black
Dark Gray with Black
Light Gray with Black
Source Code
<div class="Wh25p Pg50 FxCr CrBdGtGy CrWe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Gray</div>
<div class="Wh25p Pg50 FxCr CrBdGtDkGy CrWe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Dark Gray</div>
<div class="Wh25p Pg50 FxCr CrBdGtLtGy CrWe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Light Gray</div>
<div class="Wh25p Pg50 FxCr CrBdGtGyWe CrWe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Gray with White</div>
<div class="Wh25p Pg50 FxCr CrBdGtDkGyWe CrWe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Dark Gray with White</div>
<div class="Wh25p Pg50 FxCr CrBdGtLtGyWe CrWe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Light Gray with White</div>
<div class="Wh25p Pg50 FxCr CrBdGtGyBk CrWe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Gray with Black</div>
<div class="Wh25p Pg50 FxCr CrBdGtDkGyBk CrWe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Dark Gray with Black</div>
<div class="Wh25p Pg50 FxCr CrBdGtLtGyBk CrWe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Light Gray with Black</div>
Web Tool
Celebrate Tech © 2008 - 2024
Welcome Amit
Logout
Change Password
Change Email