CSS Background Color Generator
Create ready-to-copy CSS background declarations from a HEX color.
HEX input
CSS output
Create ready-to-copy CSS background declarations from a HEX color.
Type a 3- or 6-digit HEX color and the tool splits it into red, green and blue channels, parses each pair of hex digits to a 0–255 value, and re-serializes them as a canonical uppercase six-digit HEX string. It then prints two things: a solid background-color declaration and an optional linear-gradient that runs at 135° from your color to white. The math is a handful of JavaScript lines running on this page — the value you type is never uploaded.
Reach for it when a design hands you a raw HEX swatch and you need the exact CSS line for a section, card, hero band or button. The gradient output is a quick starting point for a subtle panel background that you can then tune by editing the angle or the second color stop.
Input #4f46e5 produces:
background-color: #4F46E5;
/* Optional gradient */
background: linear-gradient(135deg, #4F46E5, #ffffff);Drop the first line into any rule for a flat fill, or use the gradient line on its own. Remember the shorthand background resets other background sub-properties, so keep a fallback background-color above it for very old browsers.
| Notation | Example | Notes |
|---|---|---|
| 6-digit HEX | #4F46E5 | Opaque, most portable |
| 8-digit HEX | #4F46E5CC | Last byte is alpha (00–FF) |
| rgb() | rgb(79 70 229) | Modern space-separated syntax |
| rgba() | rgba(79,70,229,.8) | Fourth value is alpha 0–1 |
This generator expects a 3- or 6-digit HEX value because that is what most design tools copy. CSS itself also accepts named colors, rgb(), hsl() and hwb() — convert those to HEX first with the HEX to RGB converter if you want to use this tool.
Use an 8-digit HEX such as #4F46E5CC or rgba(79, 70, 229, .8). The final byte or fourth value is the alpha channel. A translucent background lets whatever sits behind the element show through.
background-color sets only the fill layer. background is shorthand that also resets image, position, size, repeat, attachment, clip and origin, so a later background: linear-gradient(...) wipes an earlier background-color unless you restate it.
No. The HEX value is parsed and reformatted entirely in your browser. You can go offline and the tool still works.