Split background color with one line of CSS
First off, I have some great news! CSS Simplified newsletter now has 1000 subscribers
First off, I have some great news! CSS Simplified newsletter now has 1000 subscribers 🥳 Thank you for all the love...
Create a Split in Background Color
Few days ago I wanted to design a page like this - With a split in background color, 60% white and 40% violet.
I thought this needed an additional element or a ::before
selector. But nope, it can be done with a single rule of CSS, using a linear gradient in background.
And there you go! In one shot, you have the left 60% of the page in white and the right 40% page in violet.
In case you want to change this direction for mobile layouts - that is - top part white and bottom part violet, use media queries and change to right
to to bottom
and it's done.
Check out the demo below
Note that you don't have to use percentages always. If you need a fixed 100px on the left, you can replace the 60%
in the above CSS rule to 100px
. Or instead, if you want the 100px on the right to be violet, you can use the calc()
function like so.
The possibilities are infinite! Let your imagination go wild :) Hope you liked this issue.
The possibilities are infinite! Let your imagination go wild :D Hope you liked this issue.
The possibilities are infinite! Let your imagination go wild :D Hope you liked this issue.
📘 Complete Guide to CSS Flex and Grid
If you loved this write-up and how it was explained, you’ll absolutely love my eBook CSS Flex and Grid. Check it out!
📨 Newsletter suggestion
I love Tailwind CSS. If you love it too, I highly recommend subscribing to this one 👇
Tailwind Weekly: Weekly newsletter about all things Tailwind CSS. New issue every Saturday.