Gradient
Generates CSS gradient backgrounds using Atomic classes. Supports linear-gradient, radial-gradient, and conic-gradient with HEX, RGBA, and transparent colors with position specification.
Pattern Analysis
Gradient classes are composed of prefix + direction/shape + colors.
bg{type}-{direction}-{color1}-{color2}-...| Part | Role | Example |
|---|---|---|
bglg- | linear-gradient prefix | bglg-to-r-... |
bgrg- | radial-gradient prefix | bgrg-circle-... |
bgcg- | conic-gradient prefix | bgcg-from-0deg-... |
{direction} | Direction or shape (optional) | to-r, 45deg, circle, from-90deg |
{colors} | 2 or more colors (required) | FF0000-0000FF |
Linear Gradient
Uses the bglg- prefix. Direction is specified using to-* abbreviations or deg units.
Direction Abbreviations
| Abbreviation | CSS direction |
|---|---|
to-t | to top |
to-r | to right |
to-b | to bottom |
to-l | to left |
to-tr | to top right |
to-tl | to top left |
to-br | to bottom right |
to-bl | to bottom left |
45deg | 45deg |
135deg | 135deg |
90grad | 90grad |
1-5rad | 1.5rad |
0-5turn | 0.5turn |
Usage Examples
| Class | CSS |
|---|---|
bglg-to-r-FF0000-0000FF | background: linear-gradient(to right, #FF0000, #0000FF) |
bglg-to-br-000000-FFFFFF | background: linear-gradient(to bottom right, #000000, #FFFFFF) |
bglg-45deg-FF0000-00FF00-0000FF | background: linear-gradient(45deg, #FF0000, #00FF00, #0000FF) |
bglg-to-r-0-0-0-80-0-0-0-0 | background: linear-gradient(to right, rgba(0,0,0,0.8), rgba(0,0,0,0)) |
bglg-to-r-FF0000-transparent-0000FF | background: linear-gradient(to right, #FF0000, transparent, #0000FF) |
Radial Gradient
Uses the bgrg- prefix. Shape can be specified as circle or ellipse.
| Class | CSS |
|---|---|
bgrg-circle-FF0000-0000FF | background: radial-gradient(circle, #FF0000, #0000FF) |
bgrg-ellipse-FF0000-0000FF | background: radial-gradient(ellipse, #FF0000, #0000FF) |
bgrg-FF0000-0000FF | background: radial-gradient(#FF0000, #0000FF) |
Conic Gradient
Uses the bgcg- prefix. Starting angle is specified with from-Xdeg.
| Class | CSS |
|---|---|
bgcg-from-0deg-FF0000-0000FF | background: conic-gradient(from 0deg, #FF0000, #0000FF) |
bgcg-from-90deg-FF0000-00FF00-0000FF | background: conic-gradient(from 90deg, #FF0000, #00FF00, #0000FF) |
bgcg-FF0000-00FF00-0000FF | background: conic-gradient(#FF0000, #00FF00, #0000FF) |
Color Formats
Gradient colors support 3 formats.
| Format | Pattern | Example |
|---|---|---|
| HEX (6 digits) | FF0000 | #FF0000 (red) |
| RGBA | R-G-B-A | 0-0-0-50 → rgba(0,0,0,0.5) |
| transparent | transparent | Transparent |
Color Stop Positioning
Append _position after a color to specify the color stop position.
| Class | CSS |
|---|---|
bglg-to-r-FF0000_50p-0000FF | background: linear-gradient(to right, #FF0000 50%, #0000FF) |
bglg-to-r-FF0000_2rem-0000FF | background: linear-gradient(to right, #FF0000 2rem, #0000FF) |
bglg-to-r-FF0000_1-5rem-0000FF | background: linear-gradient(to right, #FF0000 1.5rem, #0000FF) |
bglg-to-r-FF0000_100px-0000FF | background: linear-gradient(to right, #FF0000 100px, #0000FF) |
Code Examples
<!-- Default horizontal gradient -->
<div class="bglg-to-r-6366F1-A855F7 h20rem br8px"></div>
<!-- Diagonal 3-color gradient -->
<div class="bglg-45deg-FF6B6B-4ECDC4-45B7D1 h20rem br8px"></div>
<!-- Dark overlay on image -->
<div class="pr h30rem oh br8px">
<div class="pa t0 l0 w100p h100p bglg-to-b-0-0-0-0-0-0-0-80 zi10"></div>
<img class="w100p h100p ofc" src="/hero.jpg" alt="">
<h1 class="pa b2rem l2rem cFFFFFF zi20 fs3-6rem fw800">Title</h1>
</div>
<!-- Radial gradient badge -->
<div class="bgrg-circle-6366F1-1E1E2E w8rem h8rem br50p df jcc aic">
<span class="cFFFFFF fw700">NEW</span>
</div>
<!-- Conic gradient (color wheel) -->
<div class="bgcg-from-0deg-FF0000-FF8800-FFFF00-00FF00-0000FF-8800FF br50p w12rem h12rem"></div>
<!-- Gradient change on hover -->
<button class="bglg-to-r-6366F1-A855F7 hover-bglg-to-r-A855F7-6366F1 cFFFFFF py12px px2-4rem br8px tall300msease">
Hover effect
</button>Tips & Notes
3 or more colors supported
Connect colors with hyphens for 3 or more colors. Example: bglg-to-r-FF0000-00FF00-0000FF
Semi-transparent gradient with RGBA
bglg-to-b-0-0-0-0-0-0-0-80 is useful for overlays transitioning from transparent to semi-transparent black.
Gradient text
Using gradient classes with bgct(background-clip: text) creates gradient text effects.
Decimal position specification
When using decimals in rem/em positions, use hyphens as decimal points. Example: FF0000_1-5rem = 1.5rem