Old paper background texture with just css
Is it possible to create a background texture with pure CSS (without using an image) that looks like an old paper, e.g. like this: https://i.stack.imgur.com/kb0Zm.jpg I’m aware that there are limitations, the texture does not need to be as complex as the example. Is there a way to do this in CSS?
4 Answers 4
May I suggest my solution ? (tested on Chrome v92+, Firefox v90+, Edge v92+).
and a bit of SVG feTurbulence as filter :
I attempted to use this answer but the filter method for the borders did not work in Firefox or Safari for me. In Firefox it was laggy to load things on scroll, and on Safari the page broke entirely.
Thx to report this, but I use Chrome only. I’m not an integrator so I don’t need more. But I will report Chrome use only in my contribution.
@Christophe this example is beautiful. Is this example / specifically are graphics licensed for lazy people to use in non-commercial projects?
Yes and with Edge too (V 92.0.902.78). For the licence it’s free to use, but I don’t know if the background is free or no.
Background Image generator site
The best I found in 2016 was this API that creates a noise texture image. It’s not based on clever CSS3 but I’m just posting this since none of the other answers achieve what the OP wants anyway.
Note the site has the wrong output CSS code. It should be something like:
Anyone is welcome to suggest alternative parameters to that API call that look more like paper. I’ll update my answer if I come up with a good one.
Фоновая текстура для сайта при помощи CSS
Сам фон автоматически будет принимать изменение под размер экрана или монитора, вообще под разное окно, что выводит браузер. Другое дело, если он у вас не обновленный, то всю красоту безусловно не передаст, что обязательно нужно обновление. Здесь разберем несколько фонов, остальные вы можете скачать, где будет представлено изображение и стили под эту структуру или Background, что разработан на CSS. За последние несколько лет на веб сайтах доминировал плоский дизайн.
Этот минималистский подход к дизайну пользовательского интерфейса стал популярным, поскольку он давал дизайнерам возможность уменьшить отвлекающие факторы для пользователей и сосредоточить внимание на наиболее важных аспектах дизайна. Сегодня гораздо больше смысла, когда речь идет о юзабилити, особенно в гибком дизайне. Также, нужно понимать, что улучшение пользовательского опыта за счет включения контекстных обозначений, где большинство веб дизайнеров достигли путем повторного введения тонкого использования трехмерности на интернет ресурса для создания глубины и повышения значимости плоской фокальные элементы.
Приступаем к установке:
Текстура CSS на голубую бумагу
body <
background-color: #39526b;
background-image: -webkit-repeating-radial-gradient(
circle,
#293c4e, #293c4e 45%,
transparent 45%, transparent 60%,
#293c4e 60%, #293c4e 100%
);
background-image: repeating-radial-gradient(
circle,
#3a4e63, #3a4e63 45%,
transparent 45%, transparent 60%,
#3a4e63 60%, #3a4e63 100%
);
background-size: 10px 10px;
>
Второй вариант: Текстура CSS на небольшие кружочки
body <
background-color: #f1e0c5;
background-image: -webkit-repeating-radial-gradient(circle,
#e6d3b4, #e0d0b8 50%, #e0d0b8 100%
);
background-image: repeating-radial-gradient(circle,
#ecd8b9, #e0d0b8 50%, #e0d0b8 100%
);
background-size: 10px 10px;
>
Третий вариант: Текстура CSS3 на мелкую диагональную сетку
body <
background-color: #0a0a0a;
background-image: -webkit-repeating-linear-gradient(315deg,
#232323, #232323 10%,
transparent 10%, transparent 50%
),
-webkit-repeating-linear-gradient(225deg,
#232323, #232323 10%,
transparent 10%, transparent 50%
);
background-image: repeating-linear-gradient(135deg,
#232323, #232323 10%,
transparent 10%, transparent 50%
),
repeating-linear-gradient(-135deg,
#232323, #232323 10%,
transparent 10%, transparent 50%
);
background-size: 12px 12px;
>
CSS: Creating textured backgrounds
I’m currently struggling with setting an image background for my site that will load fast enough. I have used data url image and even optomized images but it’s taking to long when loading the page since the backgournd-image is still very large. Is it possible with CSS to create a textured background color like the one in the picture below? I tried and couldn’t match this:
Use a tiled background image, it’s the only way to get something that detailed. Definitely don’t use a data: URI. It looks like that particular pattern can be safely repeated at a pretty small size if you just change the texture a bit to be tileable.
You can easily achieve this using SVG and CSS in about 400 bytes. As a bonus, you can add a gradient for almost no extra cost.
5 Answers 5
with latest CSS3 technology, it is possible to create textured background. Check this out: http://lea.verou.me/css3patterns/#
but it still limited on so many aspect. And browser support is also not so ready.
your best bet is using small texture image and make repeat to that background. you could get some nice ready to use texture image here:
@albert, Nod 32 blocked patternify.com and says The web page is on the list of websites with potentially dangerous content.
@albert , it seems the issue is with Nod 32 anti virus , it is showing false positive alert because some spelling in the website
You should try slicing the image if possible into a smaller piece which could be repeated. I have sliced that image to a 101x101px image.
But in some cases, we wouldn’t be able to slice the image to a smaller one. In that case, I would use the whole image. But you could also use the CSS3 methods like what Mustafa Kamal had mentioned.
Just curious, is there a reason you chose 101 pixels? It seems like a nonstandard size, and I’m wondering if there’s a reason for this.
@ChristopherShroba, sorry for the late reply! Didn’t saw your comment. I used 101px square size because when I inspected the image, I can see that the repeating portion in the image is a square box (5rows and 5cols). Our aim is to create a tile image, that looks perfectly blended. So I cropped that portion. And when tested using the background repeat, it looked okay! So always carefully look at the image, and try to figure out which portion can be cropped to create the perfect tiles. I don’t think we should bother much about the «sizes». Hope it helps 🙂
It’s also possible to add texture using only CSS with repeating-linear-gradient()
Try the following example:
Bonus: in this link you can find different types of patterns which you can customize to fit your needs.
If you search for an image base-64 converter, you can embed some small image texture files as code into your @import url(») section of code. It will look like a lot of code; but at least all your data is now stored locally — rather than having to call a separate resource to load the image.
When I take a file from my own inventory of a simple icon in PNG format, and convert it to base-64, it looks like this in my CSS:
url('data:image/png;base64,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') With your texture images, you’ll want to employ a similar process.