Home › Templates › Rose Layout

Rose Layout

Hot pink on one side easing to pale rose on the other, flat and even, for an editorial page.

Rose Layout: Hot pink on one side easing to pale rose on the other, flat and even, for an editorial page.
Colors
Style
—

CSS

.gradient-container {
  position: relative;
  width: 100%;
  height: 100vh;
  background: linear-gradient(to bottom left, #f2bcbc 0%, #eaa2b0 20%, #ff6f8a 40%, #ff6f8a 60%, #eaa2b0 80%, #f2bcbc 100%),
    #0f172a;
  opacity: 1;
  mix-blend-mode: normal;
}

/* @designState: {"gradientSmoothness":55} */

What is the Rose Layout gradient?

Hot pink on one side easing to pale rose on the other, flat and even, for an editorial page.

How to use Rose Layout

Customize this gradient in the studio, copy the CSS on this page, or download a marked 1920px PNG. 4K and SVG stay on Pro.

Related gradients

Updated October 2026