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
Single Color Background Gradient
Smooth and Elegant Background Transitions
Enhance your design with subtle and seamless single-color background gradients. These gradients shift from light to dark variations of the same hue, creating depth and visual interest while maintaining a clean, modern aesthetic.
Key Features:
- Subtle Depth: Uses variations of a single color for a sleek gradient effect.
- Easy Implementation: Apply predefined classes to quickly add gradients.
- Fully Customizable: Adjust direction, intensity, and shades to fit your design.
- Performance Optimized: Uses lightweight CSS for smooth and efficient rendering.
- Cross-Browser Support: Ensures a consistent appearance on all modern browsers.
Theme Color Gradient
Theme
Dark Theme
Light Theme
Theme with White
Dark Theme with White
Light Theme with White
Theme with Black
Dark Theme with Black
Light Theme with Black
Source Code
<div class="Wh25p FxCr Pg50 CrBdGtTe CrWe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Theme</div>
<div class="Wh25p FxCr Pg50 CrBdGtDkTe CrWe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Dark Theme</div>
<div class="Wh25p FxCr Pg50 CrBdGtLtTe CrWe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Light Theme</div>
<div class="Wh25p FxCr Pg50 CrBdGtTeWe CrWe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Theme with White</div>
<div class="Wh25p FxCr Pg50 CrBdGtDkTeWe CrWe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Dark Theme with White</div>
<div class="Wh25p FxCr Pg50 CrBdGtLtTeWe CrWe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Light Theme with White</div>
<div class="Wh25p FxCr Pg50 CrBdGtTeBk CrWe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Theme with Black</div>
<div class="Wh25p FxCr Pg50 CrBdGtDkTeBk CrWe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Dark Theme with Black</div>
<div class="Wh25p FxCr Pg50 CrBdGtLtTeBk CrWe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Light Theme with Black</div>
Red Color Gradient
Red
Dark Red
Light Red
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 FxCr Pg50 CrBdGtRd CrWe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Red</div>
<div class="Wh25p FxCr Pg50 CrBdGtDkRd CrWe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Dark Red</div>
<div class="Wh25p FxCr Pg50 CrBdGtLtRd CrWe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Light Red</div>
<div class="Wh25p FxCr Pg50 CrBdGtRdWe CrWe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Red with White</div>
<div class="Wh25p FxCr Pg50 CrBdGtDkRdWe CrWe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Dark Red with White</div>
<div class="Wh25p FxCr Pg50 CrBdGtLtRdWe CrWe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Light Red with White</div>
<div class="Wh25p FxCr Pg50 CrBdGtRdBk CrWe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Red with Black</div>
<div class="Wh25p FxCr Pg50 CrBdGtDkRdBk CrWe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Dark Red with Black</div>
<div class="Wh25p FxCr Pg50 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