Berry Diagonal
Berry Diagonal is a berry-toned color lift gradient built with linear CSS syntax.
Berry Linear is a berry-toned color lift gradient built with linear CSS syntax.
background
Gradient Field
Copy-ready CSS
Pure CSS
background: linear-gradient(135deg, #be123c 0%, #9333ea 50%, #f0abfc 100%);Tailwind v4
bg-[linear-gradient(135deg\,_#be123c_0%\,_#9333ea_50%\,_#f0abfc_100%)]Berry Linear is a rose linear gradient preset for backgrounds, buttons, hero panels, cards, and visual accents. It uses 3 color stops (#be123c, #9333ea, #f0abfc) to create a repeatable CSS background without image assets. Berry Linear is a berry-toned color lift gradient built with linear CSS syntax. The preset is intentionally stored as a complete background declaration, which makes it easy to paste into a stylesheet, component style, or Tailwind arbitrary value. Use it when a flat fill needs more movement, or when you want a strong color system for a section. Open the generator to switch between linear, radial, and conic modes, adjust angle or center position, and move individual stops until the transition fits your layout.
Explore more
Related
These presets share color and mode tags with Berry Linear.
Berry Diagonal is a berry-toned color lift gradient built with linear CSS syntax.
Coral Linear is a warm coral brightness gradient built with linear CSS syntax.
Coral Diagonal is a warm coral brightness gradient built with linear CSS syntax.
Berry Radial is a berry-toned color lift gradient built with radial CSS syntax.
Berry Conic is a berry-toned color lift gradient built with conic CSS syntax.